add default ... for ClientSearch

Reviewed-on: jo.kuehner/TueIT_App#2

app.vue

@@ -1,22 +1,30 @@
-<!--<template>
-  <div>
-    <NuxtWelcome />
-  </div>
-</template>-->
-
 <template>
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
 </template>
 
-<script>
-  //import Page from "./layouts/Page"
 
-  /*definePageMeta({
-  layout: 'Page'
-  })*/
 
-//const layout = "Page";
+<script setup>
+
+  //const layout = "empty";
 
 </script>
+
+
+
+<style>
+
+  html, template, body, #__nuxt, #__layout {
+    height: 100vh;
+    width: 100vw;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    background-color: #212121;
+    font-size: 1rem;
+  }
+
+
+</style>

components/ClientSearch.vue

@@ -0,0 +1,71 @@
+<template>
+  <section class="client-search">
+    <div class="label">Client</div>
+    <pre class="data">...</pre>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "ClientSearch",
+
+};
+</script>
+
+<style scoped>
+.client-search {
+  display: flex;
+  align-items: center;
+  padding: 0.625em 1.875em;
+  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;
+}
+
+.label {
+  width: 2.5625em;
+  height: 1.875em;
+  font-family: "Overpass";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.875;
+  letter-spacing: 0.05em;
+  color: #FFFFFF;
+}
+
+
+  /* flex: 0;
+  height: 1.875em; */
+  /* min-width: 1.875em;
+  width: fit-content; 
+  overflow: hidden; */
+
+.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;
+
+    /* gap: 0.625em;
+    flex: 0; */
+  }
+
+.input input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: #FFFFFF;
+}
+</style>

components/Dashboard.vue

@@ -0,0 +1,78 @@
+<template>
+  <section class="dashboard">
+    <h2 class="heading">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">
+    </div>
+  </section>
+</template>
+
+
+
+<script>
+
+export default {
+  name: "Dashboard",
+  
+}
+
+</script>
+
+  
+  
+  
+<style scoped>
+  
+  .dashboard {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.875rem 3.125rem 3.125rem;
+    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;
+  }
+  
+  .heading {
+    color: #fff;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: 400 1rem/2rem Overpass, sans-serif;
+  }
+  
+  .shortcuts {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    padding: 0.625rem 2.5rem;
+    gap: 2.5rem;
+  }
+  
+  input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 15rem;
+    height: 4rem;
+    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;
+    background-color: #343434;
+  }
+  
+  
+  
+</style>

components/LoginForm.vue

@@ -0,0 +1,213 @@
+<template>
+  <form class="login-form">
+    <div class="title-field">
+      <span class="title-icon" id="logo-icon">
+        <img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
+      </span>
+      <pre class="title">Login</pre>
+    </div>
+    <div class="login-field">
+      <div class="form-field" id="username-field">
+        <label for="username-input" id="username-label">
+          <span class="icon" id="username-icon">
+            <img loading="lazy" src="../icons/Mail-Icon.svg" />
+          </span>
+          <div class="label">Username:</div>
+        </label>
+        <div class="input-field">
+          <input type="text" id="username-input" placeholder="user@example.com">
+        </div>
+      </div>
+      <div class="form-field" id="password-field">
+        <label for="password-input" id="password-label">
+          <span class="icon" id="password-icon">
+            <img loading="lazy" src="../icons/Lock-Icon.svg" />
+          </span>
+          <div class="label">Password:</div>
+        </label>
+        <div class="input-field">
+          <input type="text" id="password-input" placeholder="*******">
+          <input type="button" id="show-password-toggle" value="Show">
+      </div>
+      </div>
+    </div>
+    <input type="button" id="login-button" value="Login">
+  </form>
+</template>
+
+
+
+<script>
+
+export default {
+    name: "LoginForm",
+}
+
+</script>
+  
+  
+
+<style scoped>
+
+  * {
+    box-sizing: border-box;
+  }
+
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 31.25rem;
+    height: 31.25rem;
+    border-radius: 0.625rem;
+    padding: 2.5rem 1.875rem;
+    gap: 1.875rem;
+    border: 0.0625rem solid #000;
+    background-color: #2c2c2c;
+  }
+
+
+  .title-field {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.25rem;
+  }
+
+  .title-icon {
+    justify-content: center;
+    align-items: center;
+    width: 3.125rem;
+    height: 3.125rem;
+  }
+
+  .title-icon > img {
+    width: 3.125rem;
+    height: 3.125rem;
+    object-fit: contain;
+    object-position: center;
+    overflow: hidden;
+  }
+
+  .title {
+    margin: 0;
+    color: #fff;
+    letter-spacing: 5%;
+    white-space: nowrap;
+    font: 400 1.875rem/1.875rem Overpass, sans-serif;
+  }
+
+  
+  .login-field {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.625rem 1.25rem;
+    gap: 1.25rem;
+  }
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 25rem;
+    height: 5rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+  }
+
+  label {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    width: fit-content;
+    height: 1.875rem;
+    gap: 0.625rem;
+  }
+
+  .icon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+  }
+
+  .icon > img {
+    filter: invert(100%);
+    object-fit: contain;
+    object-position: center;
+    overflow: hidden;
+  }
+  #username-icon > img {
+    width: auto;
+    height: 0.9375rem;
+  }
+  #password-icon > img {
+    width: 0.9375rem;
+    height: auto;
+  }
+
+  .label {
+    color: #fff;
+    letter-spacing: 2%;
+    font: 400 0.9375rem/1.875rem Overpass, sans-serif;
+  }
+
+  .input-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: stretch;
+    align-self: stretch;
+    width: 100%;
+    height: 1.875rem;
+    border-radius: 0.3125rem;
+    padding: 0.1875rem 0.625rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    background-color: #212121;
+  }
+
+  input[type=text] {
+    width: 100%;
+    height: 100%;
+    background-color: #00000000;
+    border: none;
+    color: #8e8e8e;
+    letter-spacing: 5%;
+    white-space: nowrap;
+    font: 100 0.75rem/1.25rem Overpass, sans-serif;
+  }
+  input[type=button] {
+    width: fit-content;
+    align-self: flex-end;
+    background-color: #00000000;
+    border: none;
+    color: #fff;
+    letter-spacing: 5%;
+    white-space: nowrap;
+    font: 300 0.75rem/1.25rem Overpass, sans-serif;
+  }
+  
+  #login-button {
+    width: 13.75rem;
+    height: 4.375rem;
+    padding: 0.625rem;
+    border-radius: 0.625rem;
+    align-self: center;
+    border: none;
+    background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
+    color: #fff;
+    letter-spacing: 2%;
+    white-space: nowrap;
+    font: 600 1.25rem/1.875rem Overpass, sans-serif;
+  }
+  
+  
+  </style>

components/QuickAccess.vue

@@ -0,0 +1,84 @@
+<template>
+  <section class="quick-access">
+    <h2 class="heading">Quick Access</h2>
+    <div class="shortcuts">
+      <input 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">
+      <input type="button" id="issue-slips" value="My Issue Slips">-->
+    </div>
+  </section>
+</template>
+
+
+<script>
+
+export default {
+  name: "QuickAccess",
+  
+}
+
+</script>
+
+
+
+
+<style scoped>
+  
+  .quick-access {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.875rem 3.125rem 3.125rem;
+    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;
+  }
+  
+  .heading {
+    color: #fff;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: 400 1rem/2rem Overpass, sans-serif;
+  }
+  
+  .shortcuts {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    padding: 0.625rem 2.5rem;
+    gap: 2.5rem;
+  }
+  
+  input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 15rem;
+    height: 4rem;
+    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;
+    background-color: #343434;
+  }
+  input#pins {
+    border: 0.0625rem dashed #454545;
+    color: #8e8e8e;
+    font: 400 0.875rem/2rem Overpass, sans-serif;
+    background-color: #34343400;
+  }
+  
+  
+  
+</style>

components/server/AssetTable.vue

@@ -0,0 +1,123 @@
+<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>
+            </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>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "AssetTable",
+
+}
+
+</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;
+}
+
+.Type {
+    width: 12.7%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.State {
+    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/Client.vue

@@ -0,0 +1,179 @@
+<template>
+  <section class="information">
+    <h2 class="client-name">Client name</h2>
+    <div class="data-field" id="client-id">
+      <pre class="label">ID:</pre>
+      <pre class="data">...</pre>
+    </div>
+    <div class="client-data">
+      <div class="contact">
+        <h3 class="area-title">Contact:</h3>
+        <div class="data-field" id="contact-person">
+          <pre class="label">Contact person:</pre>
+          <pre class="data">...</pre>
+        </div>
+        <div class="data-field" id="e-mail">
+          <pre class="label">E-Mail:</pre>
+          <pre class="data">...</pre>
+        </div>
+        <div class="data-field" id="phone">
+          <pre class="label">Phone number:</pre>
+          <pre class="data">...</pre>
+        </div>
+      </div>
+      <div class="address">
+        <h3 class="area-title">Address:</h3>
+        <div class="street-address">
+          <div class="data-field" id="street-name">
+            <pre class="label">Street:</pre>
+            <pre class="data">...</pre>
+          </div>
+          <div class="data-field" id="street-no">
+            <pre class="label">No.:</pre>
+            <pre class="data">...</pre>
+          </div>
+        </div>
+        <div class="data-field" id="postal-code">
+          <pre class="label">Postcode:</pre>
+          <pre class="data">...</pre>
+        </div>
+        <div class="data-field" id="city">
+          <pre class="label">City:</pre>
+          <pre class="data">...</pre>
+        </div> 
+      </div>
+    </div>
+    <div class="notes">
+      <h3 class="area-title">Notes:</h3>
+      <pre class="data" id="notes">...</pre>
+    </div>
+  </section>
+</template>
+  
+  
+  
+<script>
+  
+  export default {
+    name: "Client",
+    
+  }
+  
+</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;
+  }
+  
+  
+  .client-name {
+    align-self: stretch;
+    padding: 1.25rem 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#client-id {
+    padding: 0.625rem 1.875rem;
+  }
+  .data-field#street-name {
+    width: 70%;
+  }
+  .data-field#street-no {
+    width: 30%;
+  }
+  
+  .label {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  }
+  .data {
+    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 {
+    align-self: stretch;
+  }
+
+  .client-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    padding: 0 0.625rem;
+  }
+
+  .contact, .address {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 1.25rem 0.625rem;
+    border-radius: 0.3125rem;
+  }
+  
+  .area-title {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  }
+  
+  .street-address {
+    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 {
+    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/ClientQuickAccess.vue

@@ -0,0 +1,79 @@
+<template>
+  <section class="quick-access">
+    <h2 class="heading">Quick Access</h2>
+    <div class="shortcuts">
+      <input type="button" id="maintenance-visits" value="Maintenance Visits">
+      <input type="button" id="production-orders" value="Production Orders">
+      <input type="button" id="issue-slips" value="Assets">
+      <input type="button" id="solutions" value="Solutions">
+      <input type="button" id="issue-slips" value="Issue Slips">
+    </div>
+  </section>
+</template>
+  
+  
+  
+<script>
+  
+  export default {
+    name: "ClientQuickAccess",
+    
+  }
+  
+</script>
+  
+    
+    
+    
+<style scoped>
+    
+    .quick-access {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      align-self: stretch;
+      width: 100%;
+      padding: 1.875rem 1.875rem 3.125rem;
+      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;
+    }
+    
+    .heading {
+      color: #fff;
+      letter-spacing: 5%;
+      text-decoration-line: underline;
+      font: 400 1rem/2rem Overpass, sans-serif;
+    }
+    
+    .shortcuts {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-content: center;
+      padding: 0.625rem 1.875rem;
+      gap: 2.5rem;
+    }
+    
+    input {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      width: 15rem;
+      height: 4rem;
+      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;
+      background-color: #343434;
+    }
+    
+    
+    
+ </style>

components/server/ClientTable.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="data">
+        <table class="data-table" id="client-table">
+            <tr class="table-row" id="table-head">
+                <th class="ID">ID</th>
+                <th  class="Name">Name</th>
+            </tr>
+            <tr class="table-row" id="row-1">
+                <td class="ID">...</td>
+                <td class="Name">...</td>
+            </tr>
+            <tr class="table-row" id="row-2">
+                <td class="ID">...</td>
+                <td class="Name">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+  
+  export default {
+    name: "ClientTable",
+    
+  }
+  
+</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;
+        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;
+        padding: 0;
+        color: #ffffff;
+        letter-spacing: 5%;
+        font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    }
+    th {
+        font: 700 0.875rem/1.875rem Overpass, sans-serif;
+    }
+    .ID {
+        width: 40%;
+        border-right: 0.0625rem solid #000000;
+    }
+    .Name {
+        width: 60%;
+    }
+    
+    
+    
+</style>

documentation/Datenbankmodell_tueitApp.drawio

@@ -112,13 +112,13 @@
         <mxCell id="DauqCNUrC7Z9yIe88X-r-57" value="CPU" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="480" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt;      &lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt;     &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt;      &lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt;     &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="510" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt;     &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt;     &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="540" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="570" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="qbUp6gtjYndA0fy5zK6_-3" value="softwareBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">

layouts/Actionbar.vue

@@ -1,5 +1,168 @@
 <template>
-    <NuxtLayout>
+  <aside class="actionbar">
-      <NuxtPage />
+    <div class="icon" id="indicator-icon">
-    </NuxtLayout>
+      <img loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
-  </template>
+    </div>
+    <nav class="actions">
+      <button id="search">
+        <div class="icon" id="search-icon">
+          <img loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg"/>
+        </div>
+        <pre class="label">Search</pre>
+      </button>
+      <button id="filter">
+        <div class="icon" id="filter-icon">
+          <img loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg"/>
+        </div>
+        <pre class="label">Filter</pre>
+      </button>
+      <button id="instances">
+        <div class="icon" id="instances-icon">
+          <img loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg"/>
+        </div>
+        <pre class="label">Instances</pre>
+      </button>
+      <button id="attachments">
+        <div class="icon" id="attachments-icon">
+          <img loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg"/>
+        </div>
+        <pre class="label">Attachments</pre>
+      </button>
+      <button id="sell">
+        <div class="icon" id="sell-icon">
+          <img loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg"/>
+        </div>
+        <pre class="label">Sell</pre>
+      </button>
+      <button id="archive">
+        <div class="icon" id="archive-icon">
+          <img loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
+        </div>
+        <pre class="label">Archive</pre>
+      </button>
+      <button id="new">
+        <div class="icon" id="new-icon">
+          <img loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg"/>
+        </div>
+        <pre class="label">New</pre>
+      </button>
+      <button id="edit">
+        <div class="icon" id="edit-icon">
+          <img loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
+        </div>
+        <pre class="label">Edit</pre>
+      </button>
+      <button id="delete">
+        <div class="icon" id="delete-icon">
+          <img loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg"/>
+        </div>
+        <pre class="label">Delete</pre>
+      </button>
+    </nav>
+  </aside>
+</template>
+
+
+<script>
+
+export default {
+    name: "Actionbar",
+}
+
+</script>
+
+
+
+<style scoped>
+
+  * {
+    box-sizing: border-box;
+  }
+
+
+  .actionbar {
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    top: 5rem;
+    align-items: flex-start;
+    justify-content: center;
+    width: fit-content;
+    height: fit-content;
+    border-radius: 0.625rem;
+    padding: 1.875rem 0.625rem;
+    gap: 1.25rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+  }
+
+
+  .actions {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    align-self: stretch;
+    padding: 1.25rem 0;
+    gap: 1.25rem;
+  }
+
+
+  button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    height: 1.875rem;
+    border-radius: 0.625rem;
+    border: none;
+    background-color: #2c2c2c;
+    transition-duration: 0.5s;
+  }
+  button:hover {
+    background-color: #444444;
+  }
+
+
+  .icon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+  }
+  #indicator-icon {
+    width: 1.875rem;
+    height: 1.875rem;
+    border-radius: 0.3125rem;
+    background-color: #2c2c2c;
+    transition-duration: 0.5s;
+  }
+  #indicator-icon:hover {
+    background-color: #444444;
+  }
+
+  .icon > img {
+    width: 0.875rem;
+    height: 0.875rem;
+    filter: invert(100%);
+    object-fit: contain;
+    object-position: center;
+    overflow: hidden;
+  }
+  #indicator-icon > img {
+    height: 1.25rem;
+  }
+
+
+  .label {
+    color: #fff;
+    letter-spacing: 5%;
+    align-self: center;
+    white-space: nowrap;
+    font: 400 0.875rem/1.25rem Overpass, sans-serif;
+  }
+  
+
+</style>

layouts/Navigationbar.vue

@@ -1,180 +1,267 @@
 <template>
-    <section class="sidebar">
+  <aside
+    :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggle">
-        <div class="icon"  id="back-icon">
+      <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
-          <img loading="lazy" src="../icons/Back-Icon.svg"/>
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
       </div>
-        <div class="icon" id="indicator-icon">
+      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
-          <img loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg"/>
+        @click="toggleSidebar">
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
     </div>
     <div class="menus">
-        <nav id="home-menu">
+      <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
-          <button id="home-button">
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="home-button">
           <div class="icon" id="home-icon">
-              <img loading="lazy" src="../icons/navbar-icons/Home-Icon.svg"/>
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Home-Icon.svg" />
           </div>
-            <pre class="label">Home</pre>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
-          </button>
+        </router-link>
       </nav>
       <nav id="site-menu">
-          <button id="checklists-button">
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
           <div class="icon" id="checklists-icon">
-              <img loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg"/>
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Checklists-Icon.svg" />
           </div>
-            <pre class="label">Checklists</pre>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
-          </button>
+        </router-link>
-          <button id="assets-button">
+        <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
           <div class="icon" id="assets-icon">
-              <img loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg"/>
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Assets-Icon.svg" />
           </div>
-            <pre class="label">Config Items</pre>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
-          </button>
+        </router-link>
-          <button id="solutions-button">
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
           <div class="icon" id="solutions-icon">
-              <img loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg"/>
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Solutions-Icon.svg" />
           </div>
-            <pre class="label">Solutions</pre>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
-          </button>
+        </router-link>
-          <button id="accounting-button">
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
           <div class="icon" id="accounting-icon">
-              <img loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg"/>
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Accounting-Icon.svg" />
           </div>
-            <pre class="label">Accounting</pre>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
-          </button>
+        </router-link>
-          <button id="clients-button">
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="clients-button">
           <div class="icon" id="clients-icon">
-              <img loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg"/>
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Clients-Icon.svg" />
           </div>
-            <pre class="label">Clients</pre>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
-          </button>
+        </router-link>
       </nav>
     </div>
-    </section>
+  </aside>
 </template>
 
 
 
 <script>
-
 export default {
   name: "Navigationbar",
+  data() {
+    return {
+      darkMode: true,
+      isExpanded: true,
+    };
+  },
+  methods: {
+    toggleSidebar() {
+      this.isExpanded = !this.isExpanded;
+    }
+  }
 }
 
 </script>
   
   
   
-<style>
+<style scoped>
-
+* {
-  * {
   box-sizing: border-box;
-  }
+}
 
-  .sidebar {
+aside {
-    align-items: flex-start;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
-    width: 200px;
   display: flex;
   flex-direction: column;
-    border-radius: 10px;
+  position: sticky;
-    gap: 10px;
+  top: 5rem;
-    padding: 10px;
+  width: 3.125rem;
-  }
+  transition: 0.5s ease-in-out;
+}
+
+aside.is-expanded {
+  width: 12.5rem;
+}
+
+.is-expanded .label {
+  opacity: 1;
+  transition: 0.5s ease-in-out;
+}
+
+.is-not-expanded #indicator-icon {
+  transform: rotate(180deg);
+  transition: 0.5s ease-in-out;
+}
 
 
-  .toggle {
+.navbar {
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
+  border-radius: 0.625rem;
+  align-items: stretch;
+  justify-content: center;
+  gap: 0.625rem;
+  padding: 0.9375rem;
+  margin: 0;
+}
+
+.navbar-darkmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #2C2C2C;
+}
+
+.navbar-lightmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #FFFFFF;
+}
+
+
+.toggle {
+  display: flex;
+  flex-direction: row;
+  height: 2.5rem;
+  align-items: center;
   justify-content: space-between;
-    align-items: center;
+}
-    align-self: stretch;
-    display: flex;
-    height: 40px;
-    padding: 10px;
-  }
 
 
-
+.menus {
-  .menus {
-    align-items: flex-start;
-    align-self: stretch;
   display: flex;
   flex-direction: column;
-    padding: 40px 0;
+  position: relative;
-    gap: 30px;
+  justify-content: flex;
-  }
+  padding: 1.25rem 0;
+  gap: 1.875rem;
+  transition: 0.5s ease-in-out;
+  align-items: center;
+}
 
-  nav {
+
+nav {
+  display: flex;
+  flex-direction: column;
   justify-content: center;
-    align-items: center;
+  padding: 0.9375rem 0;
-    align-self: stretch;
+  gap: 1.875rem;
-    display: flex;
+  width: 92%;
-    flex-direction: column;
+}
-    padding: 10px;
+
-    gap: 30px;
+.menu-darkmode {
-  }
+  border-bottom: 0.0625rem solid #8E8E8E;
-  #home-menu {
+}
-    border-bottom: 1px solid #8e8e8e;
+
-  }
+.menu-lightmode {
+  border-bottom: 0.0625rem solid #BABABA;
+}
 
 
-  button {
+
+button,
+a {
   display: flex;
-    align-items: center;
+  flex-direction: row;
   align-self: stretch;
+  height: 2.1875rem;
+  border-radius: 0.3125rem;
+  align-items: center;
   justify-content: flex-start;
-    height: 35px;
+  gap: 0.3125rem;
   border: none;
-    border-radius: 5px;
+  transition: 0.5s ease-in-out;
-    padding: 5px;
+  text-decoration: none;
-    gap: 10px;
+  width: 100%;
-    background-color: #2c2c2c;
+}
-    transition-duration: 0.5s;
+
-  }
+.button-darkmode {
-  button:hover {
+  background-color: #2C2C2C;
+}
+
+.button-lightmode {
+  background-color: #FFFFFF;
+}
+
+.button-darkmode:hover,
+.indicator-darkmode:hover,
+.back-darkmode:hover {
   background-color: #444444;
-  }
+}
 
+.button-lightmode:hover,
+.indicator-lightmode:hover,
+.back-lightmode:hover {
+  background-color: #ACACAC;
+}
 
-  .icon {
+.icon {
   display: flex;
+  flex-direction: row;
+  width: 2.1875rem;
+  height: 2.1875rem;
   align-items: center;
   justify-content: center;
-    width: 25px;
+  transition: 0.2s ease-in-out;
-    height: 25px;
+}
-  }
-  #indicator-icon, #back-icon {
-    width: 30px;
-    height: 30px;
-    border-radius: 5px;
-    background-color: #2c2c2c;
-    transition-duration: 0.5s;
-  }
-  #indicator-icon:hover, #back-icon:hover {
-    width: 30px;
-    height: 30px;
-    background-color: #444444;
-  }
 
-  .icon > img {
+#back-icon,
-    width: 20px;
+#indicator-icon {
-    height: 20px;
+  width: 2.5rem;
-    filter: invert(100%);
+  height: 2.5rem;
+  border-radius: 0.3125rem;
+  transition-duration: 0.5s;
+  transition: 0.2s ease-out;
+}
+
+
+img {
+  width: 1.25rem;
+  height: 1.25rem;
   object-fit: contain;
   object-position: center;
   overflow: hidden;
-  }
+  transition: 0.2s ease-out;
+}
 
+.img-darkmode {
+  filter: invert(100%);
+}
 
-  .label {
+.label {
-    color: #fff;
+  letter-spacing: 5%;
-    /*leading-trim: both;
-    text-edge: cap;*/
-    letter-spacing: 0.7px;
   align-self: center;
   white-space: nowrap;
   margin: auto 0;
-    font: 700 14px/20px Overpass, sans-serif;
+  font: 600 0.875rem/1.25rem Overpass, sans-serif;
-  }
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+}
 
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000000;
+}
 </style>

layouts/PageHeader.vue

@@ -22,7 +22,7 @@ export default {
 </script>
 
 
-<style>
+<style scoped>
 
     * {
         box-sizing: border-box;
@@ -30,44 +30,48 @@ export default {
 
     header {
         display: flex;
+        flex-direction: row;
+        position: sticky;
+        top: 0;
+        width: 100%;
+        height: 4.375rem;
+        align-self: stretch;
         justify-content: space-between;
         align-items: center;
-        align-self: stretch;
+        padding: 0.625rem 1.25rem;
-        border-bottom: 1px solid #000;
         background-color: #2c2c2c;
-        height: 60px;
-        padding: 10px 20px;
     }
     
     #header-logo {
         object-fit: contain;
         object-position: center;
-        width: 80px;
+        width: 5rem;
-        height: 40px;
+        height: 2.5rem;
         justify-content: center;
         align-items: center;
         overflow: hidden;
     }
 
     .profile {
-        align-items: flex-end;
         display: flex;
-        gap: 10px;
+        flex-direction: row;
-        padding: 0 30px;
+        align-items: flex-end;
+        gap: 0.625rem;
+        padding: 0 0.625rem;
     }
     .username {
-        color: #fff;
-        text-align: right;
-        letter-spacing: 0.8px;
         align-self: center;
         margin: auto 0;
-        font: 200 14px Overpass, sans-serif;
+        color: #fff;
+        text-align: right;
+        font: 200 0.875rem Overpass, sans-serif;
+        letter-spacing: 5%;
     }
     .picture {
         display: flex;
+        width: 2.5rem;
+        height: 2.5rem;
         border-radius: 50%;
-        width: 40px;
-        height: 40px;
         background-color: #fff;
     }
 

layouts/default.vue

@@ -1,30 +1,24 @@
 <template>
-  <body>
   <PageHeader />
   <main>
     <Navigationbar />
-      <section id="content">
+    <slot />
-        <section id="content-header">
+    <Actionbar />
-          <pre id="page-name">Pagename</pre>
-        </section>
-        <section id="content-body">
-          <!--<slot />-->
-        </section>
-      </section>
   </main>
-  </body>
 </template>
 
 
 <script>
 import PageHeader from "./PageHeader.vue";
 import Navigationbar from "./Navigationbar.vue";
+import Actionbar from "./Actionbar.vue";
 
 export default {
     name: "Page",
     components: {
       PageHeader, 
       Navigationbar,
+      Actionbar,
     }
 }
 
@@ -32,70 +26,21 @@ export default {
   
   
   
-<style>
+<style scoped>
 
   * {
     box-sizing: border-box;
   }
 
-  body {
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-    align-content: stretch;
-    background-color: #212121;
-  }
-  
   main {
     display: flex;
     flex-direction: row;
     width: 100%;
-    gap: 10px;
+    padding: 0.625rem;
-    padding: 10px;
+    gap: 0.625rem;
+    background-color: #212121;
   }
   
-  #content {
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-    align-items: stretch;
-    width: 100%;
-    gap: 10px;
-    padding: 0 20px;
-  }
   
-  #content-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 50px;
-  }
-  #page-name {
-    color: #fff;
-    letter-spacing: 1.2px;
-    font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
-      sans-serif;
-  }
-
-  #content-body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 20px;
-    margin-bottom: 10px;
-    border-radius: 10px;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
-  }
-
-  slot {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 20px;
-    padding: 20px 30px;
-  }
   
 </style>

layouts/empty.vue

@@ -0,0 +1,40 @@
+<template>
+    <PageHeader />
+    <main>
+        <slot />
+    </main>
+</template>
+  
+  
+  <script>
+  import PageHeader from "../layouts/PageHeader.vue";
+  
+  export default {
+      name: "Page",
+      components: {
+        PageHeader,
+      }
+  }
+  
+  </script>
+    
+    
+    
+  <style scoped>
+  
+    * {
+      box-sizing: border-box;
+    }
+  
+    
+    main {
+      display: flex;
+      flex-direction: row;
+      gap: 0.625rem;
+      padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
+      background-color: #212121;
+    }
+    
+    
+    
+  </style>

pages/assets.vue

@@ -0,0 +1,78 @@
+<template>
+    <section id="content">
+        <div id="content-header">
+            <h1 id="page-name">Assets</h1>
+        </div>
+        <div id="content-body">
+          <ClientSearch />
+          <AssetTable />
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+  definePageMeta({
+    layout: 'default'
+  })
+</script>
+
+<script>
+import ClientSearch from "../components/ClientSearch.vue";
+import AssetTable from "../components/server/AssetTable.vue";
+
+  export default {
+    name: "AssetPage",
+    components: {
+      ClientSearch,
+      AssetTable,
+    }
+  }
+
+</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;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+  }
+</style>

pages/clients.vue

@@ -0,0 +1,85 @@
+<template>
+    <section id="content">
+        <div id="content-header">
+            <h1 id="page-name">Clients</h1>
+        </div>
+        <div id="content-body">
+            <Client />
+            <ClientQuickAccess />
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+  definePageMeta({
+    layout: 'default'
+  })
+</script>
+
+<script>
+  import ClientTable from "../components/server/ClientTable.vue";
+  import Client from "../components/server/Client.vue";
+  import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
+  import ClientEmployees from "../components/server/ClientEmployees.vue";
+  import ClientEmployee from "../components/server/ClientEmployee.vue";
+
+  export default {
+    name: "ClientsPage",
+    components: {
+      ClientTable,
+      Client,
+      ClientQuickAccess,
+      ClientEmployees,
+      ClientEmployee,
+    }
+  }
+
+</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;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+  }
+
+  
+</style>

pages/home.vue

@@ -0,0 +1,81 @@
+<template>
+  <Navigationbar />
+  <section id="content">
+    <div id="content-header">
+      <pre id="page-name">Home</pre>
+    </div>
+    <div id="content-body">
+      <Dashboard />
+      <QuickAccess />
+    </div>
+  </section>
+</template>
+  
+  
+<script setup>
+  definePageMeta({
+    layout: 'empty'
+  })
+</script>
+
+<script>
+  import Navigationbar from "../layouts/Navigationbar.vue";
+  import Dashboard from "../components/Dashboard.vue";
+  import QuickAccess from "../components/QuickAccess.vue";
+
+  export default {
+    name: "HomePage",
+    components: {
+      Navigationbar,
+      Dashboard,
+      QuickAccess,
+    }
+  }
+
+</script>
+    
+    
+    
+<style>
+
+  * {
+    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;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+  }
+
+  
+</style>

pages/index.vue

@@ -1,29 +1,83 @@
 <template>
-    <head>
+    <section id="content">
-        <title></title>
+        <div id="content-header">
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+            <h1 id="page-name">Pagename</h1>
-    </head>
+        </div>
-    <body>
+        <div id="content-body">
-        <NuxtLayout>
+            <section id="stuff"></section>
-            <NuxtPage />
+        </div>
-        </NuxtLayout>
+    </section>
-    </body>
 </template>
   
-<script lang="ts">
+  
-export default {
+<script setup>
-	head: {
+  definePageMeta({
-		title: 'tueit App',
+    layout: 'default'
-	},
+  })
-};
 </script>
 
-<style>
+<script>
-    html, template, body {
+  export default {
-        height: 100%;
+    name: "Testpage",
-        width: 100%;
+    components: {
-        height: 100vh;
-        width: 100vw;
-        margin: 0;
     }
+  }
+
+</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;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+  }
+
+  #stuff {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    padding: 1.25rem 1.875rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+    background-color: #2C2C2C;
+  }
+  
 </style>

pages/login.vue

@@ -1,5 +1,80 @@
 <template>
-  <NuxtLayout>
+  <section id="content">
-    <NuxtPage />
+    <div id="content-header">
-  </NuxtLayout>
+      <pre id="page-name"> </pre>
+    </div>
+    <div id="content-body">
+      <LoginForm />
+    </div>
+  </section>
 </template>
+
+
+<script setup>
+definePageMeta({
+  layout: 'empty'
+})
+</script>
+
+<script>
+import LoginForm from "../components/LoginForm.vue";
+
+export default {
+    name: "LoginPage",
+    components: {
+      LoginForm,
+    }
+}
+
+</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;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: fit-content;
+    height: fit-content;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+  }
+
+  
+  
+</style>

public/icons/Lock-Icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" fill="none" viewBox="0 0 12 15">
+  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M9.333 7.833H10.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 1 14V8.333a.5.5 0 0 1 .5-.5h1.167m6.666 0V4.5c0-1.111-.666-3.333-3.333-3.333-2.667 0-3.333 2.222-3.333 3.333v3.333m6.666 0H2.667"/>
+</svg>

public/icons/Mail-Icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none" viewBox="0 0 16 12">
+  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m4.572 3.857 3.572 2.5 3.571-2.5"/>
+  <path stroke="#000" d="M1 9.571V2.43C1 1.639 1.64 1 2.429 1h11.428c.79 0 1.429.64 1.429 1.429V9.57c0 .79-.64 1.429-1.429 1.429H2.43A1.427 1.427 0 0 1 1 9.571Z"/>
+</svg>

routerFrontend/index.js

@@ -0,0 +1,30 @@
+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'
+
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: LoginPage
+        },
+        {
+            path: '/home',
+            component: HomePage
+        }, 
+        {
+            path: '/assets',
+            component: AssetPage
+        },  
+        {
+            path: '/clients',
+            component: ClientsPage
+        },         
+    ]
+})
+
+export default router