added lightmode for login component

Reviewed-on: jo.kuehner/TueIT_App#7

components/LoginForm.vue

@@ -1,37 +1,37 @@
 <template>
-  <form class="login-form">
+  <form :class="['login-form', darkMode ? 'form-darkmode' : 'form-lightmode']">
     <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>
+      <pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">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">
+          <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
             <img loading="lazy" src="../icons/Mail-Icon.svg" />
           </span>
-          <div class="label">Username:</div>
+          <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
         </label>
-        <div class="input-field">
+        <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
           <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">
+          <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
             <img loading="lazy" src="../icons/Lock-Icon.svg" />
           </span>
-          <div class="label">Password:</div>
+          <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
         </label>
-        <div class="input-field">
+        <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
           <input type="text" id="password-input" placeholder="*******">
-          <input type="button" id="show-password-toggle" value="Show">
+          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
         </div>
       </div>
     </div>
-    <input type="button" id="login-button" value="Login">
+    <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login">
   </form>
 </template>
 
@@ -41,6 +41,11 @@
 
 export default {
   name: "LoginForm",
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -48,7 +53,6 @@ export default {
   
 
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -64,10 +68,17 @@ export default {
   border-radius: 0.625rem;
   padding: 2.5rem 1.875rem;
   gap: 1.875rem;
+}
+
+.form-darkmode {
   border: 0.0625rem solid #000;
   background-color: #2c2c2c;
 }
 
+.form-lightmode {
+  border: 0.0625rem solid #8e8e8e;
+  background-color: #fff;
+}
 
 .title-field {
   display: flex;
@@ -94,12 +105,20 @@ export default {
 
 .title {
   margin: 0;
-    color: #fff;
   letter-spacing: 5%;
   white-space: nowrap;
   font: 400 1.875rem/1.875rem Overpass, sans-serif;
 }
 
+.pre-darkmode,
+.title-darkmode {
+  color: #fff;
+}
+
+.pre-lightmode,
+.title-lightmode {
+  color: #000;
+}
 
 .login-field {
   display: flex;
@@ -140,26 +159,42 @@ export default {
 }
 
 .icon>img {
-    filter: invert(100%);
   object-fit: contain;
   object-position: center;
   overflow: hidden;
 }
+
+.icon-darkmode>img {
+  filter: invert(100%);
+}
+
+.icon-lightmode>img {
+  filter: invert(0%);
+}
+
 #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;
 }
 
+.label-darkmode {
+  color: #fff;
+}
+
+.label-lightmode {
+  color: #000;
+}
+
 .input-field {
   display: flex;
   flex-direction: row;
@@ -171,9 +206,16 @@ export default {
   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;
+}
+
+.input-darkmode {
   background-color: #212121;
 }
 
+.input-lightmode {
+  background-color: #EBEBEB;
+}
+
 input[type=text] {
   width: 100%;
   height: 100%;
@@ -184,17 +226,25 @@ export default {
   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;
 }
 
+.button-darkmode {
+  color: #fff;
+}
+
+.button-lightmode {
+  color: #000;
+}
+
 #login-button {
   width: 13.75rem;
   height: 4.375rem;
@@ -202,12 +252,10 @@ export default {
   border-radius: 0.625rem;
   align-self: center;
   border: none;
+  color: #000;
   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/server/Accounting.vue

@@ -0,0 +1,226 @@
+<template>
+    <section :class="['accounting-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting:
+            <div class="asset-data">
+                <table class="data-table" id="asset-table-no-client">
+                    <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                        <th :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Action</th>
+                        <th :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">Date</th>
+                        <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
+                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier request</td>
+                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier offer</td>
+                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Client offer</td>
+                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Client order</td>
+                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier order</td>
+                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Ingress</td>
+                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Egress</td>
+                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
+                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Ingress bill</td>
+                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
+                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Egress bill</td>
+                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "Accounting",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</script>
+    
+      
+      
+      
+<style scoped>
+.accounting-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 1rem/1.875rem Overpass, sans-serif;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.label#accounting {
+    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;
+}
+
+.first-tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.first-tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+.final-tr-darkmode {
+    background-color: #212121;
+}
+
+.final-tr-lightmode {
+    background-color: #EBEBEB;
+}
+
+
+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;
+}
+
+tr#row-2 {
+    margin-bottom: 0.75rem;
+}
+
+
+.Action {
+    width: 40%;
+}
+
+.Action-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Action-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Date {
+    width: 20%;
+}
+
+.Date-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Date-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 40%;
+}
+</style>

components/server/Issue.vue

@@ -0,0 +1,213 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['issue-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
+        <div class="issue-data">
+            <div class="type">
+                <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="info">
+                <div class="state-amount">
+                    <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 class="data-field" id="amount">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="issue-data">
+            <div class="additional">
+                <div class="properties">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "Issue",
+    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;
+}
+
+
+
+.issue-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;
+}
+
+.issue-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.type,
+.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;
+}
+
+.state-amount {
+    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#properties {
+    align-self: stretch;
+}
+
+.properties {
+    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/IssueSlip.vue

@@ -0,0 +1,213 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['issueSlip-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">ID issue slips</h2>
+        <div class="issueSlip-data">
+            <div class="client">
+                <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>
+            <div class="info">
+                <div class="ticketNo-user">
+                    <div class="data-field" id="ticketNo">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="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>
+            </div>
+        </div>
+        <div class="issueSlip-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: "IssueSlip",
+    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;
+}
+
+
+
+.issueSlip-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;
+}
+
+.issueSlip-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client,
+.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;
+}
+
+.ticketNo-user {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.data#notes {
+    align-self: stretch;
+}
+
+.notes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+
+</style>

components/server/IssueSlipTable.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="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="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">Ticket No.</th>
+                <th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">Creation Date</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
+                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">...</td>
+                <td :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "IssueSlipTable",
+    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: 31.6%;
+}
+
+.Client-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Client-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID {
+    width: 31.6%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.TicketNo {
+    width: 15.8%;
+}
+
+.TicketNo-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.TicketNo-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CreationDate {
+    width: 15.8%;
+}
+
+.CreationDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CreationDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/IssueSlipTableNoClient.vue

@@ -0,0 +1,175 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
+        <table class="data-table" id="asset-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">Ticket No.</th>
+                <th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">Creation Date</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">...</td>
+                <td :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "IssueSlipTableNoClient",
+    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;
+}
+.ID {
+    width: 47.5%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.TicketNo {
+    width: 23.75%;
+}
+
+.TicketNo-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.TicketNo-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CreationDate {
+    width: 23.75%;
+}
+
+.CreationDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CreationDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/IssueTable.vue

@@ -0,0 +1,175 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div>
+        <table class="data-table" id="asset-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
+                <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
+                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
+                <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "IssueTable",
+    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: 33.3%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 33.3%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.State {
+    width: 22.2%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Amount {
+    width: 11.1%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/IssueVariant.vue

@@ -0,0 +1,217 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['issue-variant-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
+        <div class="issue-variant-data">
+            <div class="variantOf">
+                <div class="data-field" id="variantOf">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Variant of:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="state-amount-price">
+                    <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 class="data-field" id="amount">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="data-field" id="price">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Price:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="issue-variant-data">
+            <div class="additional">
+                <div class="properties">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "IssueVariant",
+    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;
+}
+
+
+
+.issue-variant-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;
+}
+
+.issue-variant-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.variantOf,
+.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;
+}
+
+.state-amount-price {
+    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#properties {
+    align-self: stretch;
+}
+
+.properties {
+    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/IssueVariants.vue

@@ -0,0 +1,190 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
+        <table class="data-table" id="issue-variants-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">Properties</th>
+                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
+                <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th>
+                <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">...</td>
+                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
+                <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">...</td>
+                <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "IssueVariants",
+    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;
+}
+
+.Properties {
+    width: 30%;
+}
+
+.Properties-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Properties-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Name {
+    width: 30%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.State {
+    width: 15%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Amount {
+    width: 15%;
+}
+
+.Amount-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Amount-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Price {
+    width: 10%;
+}
+
+.label {
+  width: 6.0625em;
+  height: 1.875em;
+  font-family: 'Overpass';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 1.875em;
+  letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/OrderingInformation.vue

@@ -0,0 +1,187 @@
+<template>
+    <section :class="['ordering-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information:
+            <div class="asset-data">
+                <table class="data-table" id="asset-table-no-client">
+                    <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                        <th :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">Article</th>
+                        <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th>
+                        <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">Price</th>
+                        <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                    </tr>
+                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <td :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">...</td>
+                        <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Amount-darkmode' : 'Amount-lightmode']">...</td>
+                        <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Price-darkmode' : 'Price-lightmode']">...</td>
+                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "OrderingInformation",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</script>
+    
+      
+      
+      
+<style scoped>
+.ordering-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 1rem/1.875rem Overpass, sans-serif;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.label#ordering {
+    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;
+}
+
+
+.Article {
+    width: 30%;
+}
+
+.Article-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Article-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Amount {
+    width: 15%;
+}
+
+.Amount-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Amount-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Price {
+    width: 15%;
+}
+
+.Price-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Price-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 50%;
+}
+</style>

layouts/Navigationbar.vue

@@ -44,7 +44,7 @@
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
         </router-link>
-        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
+        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
           <div class="icon" id="accounting-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Accounting-Icon.svg" />

pages/issueSlips.vue

@@ -0,0 +1,134 @@
+<template>
+  <section id="content">
+    <div id="content-header">
+      <router-link to="/issueSlips" class="button" id="issueSlips-button">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips</h1>
+      </router-link>
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      <router-link to="/issues" class="button" id="issues-button">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
+      </router-link>
+    </div>
+    <div id="content-body">
+      <ClientSearch />
+      <IssueSlipTable />
+      <IssueSlipTableNoClient />
+      <IssueSlip />
+      <OrderingInformation />
+      <Accounting />
+    </div>
+  </section>
+</template>
+    
+    
+<script setup>
+definePageMeta({
+  layout: 'default'
+})
+</script>
+  
+<script>
+import ClientSearch from "../components/ClientSearch.vue";
+import IssueSlipTable from "../components/server/IssueSlipTable.vue";
+import IssueSlipTableNoClient from "../components/server/IssueSlipTableNoClient.vue";
+import IssueSlip from "../components/server/IssueSlip.vue";
+import OrderingInformation from "../components/server/OrderingInformation.vue";
+import Accounting from "../components/server/Accounting.vue";
+
+export default {
+  name: "IssueSlipPage",
+  components: {
+    ClientSearch,
+    IssueSlipTable,
+    IssueSlipTableNoClient,
+    IssueSlip,
+    OrderingInformation,
+    Accounting,
+  },
+  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;
+}
+
+#active-page-name {
+  letter-spacing: 5%;
+  font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
+  text-decoration: underline;
+}
+
+.button {
+  text-decoration: none;
+}
+
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
+#content-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
+</style>

pages/issues.vue

@@ -0,0 +1,128 @@
+<template>
+    <section id="content">
+        <div id="content-header">
+            <router-link to="/issueSlips" class="button" id="issueSlips-button">
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips</h1>
+            </router-link>
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
+            <router-link to="/issues" class="button" id="issues-button">
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
+            </router-link>
+        </div>
+        <div id="content-body">
+            <IssueTable />
+            <Issue />
+            <IssueVariants />
+            <IssueVariant />
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+definePageMeta({
+    layout: 'default'
+})
+</script>
+  
+<script>
+import IssueTable from "../components/server/IssueTable.vue";
+import Issue from "../components/server/Issue.vue";
+import IssueVariants from "../components/server/IssueVariants.vue";
+import IssueVariant from "../components/server/IssueVariant.vue";
+
+export default {
+    name: "IssuePage",
+    components: {
+        IssueTable,
+        Issue,
+        IssueVariants,
+        IssueVariant,
+    },
+    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;
+}
+
+#active-page-name {
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+    text-decoration: underline;
+}
+
+.button {
+  text-decoration: none;
+}
+
+.h1-darkmode {
+    color: #fff;
+}
+
+.h1-lightmode {
+    color: #000;
+}
+
+#content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+}
+</style>

pages/login.vue

@@ -46,7 +46,7 @@ export default {
   flex-direction: column;
   float: left;
   justify-content: stretch;
-  align-items: stretch;
+  align-items: center;
   width: 100%;
   flex-grow: 1;
   gap: 0.625rem;

routerFrontend/index.js

@@ -4,12 +4,14 @@ import ClientsPage from '../pages/clients.vue';
 import LoginPage from '../pages/login.vue';
 import AssetPage from '../pages/assets.vue';
 import SolutionPage from '../pages/solutions.vue';
+import IssueSlipPage from '../pages/issueSlips.vue';
+import IssuesPages from '../pages/issues.vue';
 
 const router = createRouter({
     history: createWebHistory(),
     routes: [
         {
-            path: '/',
+            path: '/login',
             component: LoginPage
         },
         {
@@ -24,6 +26,14 @@ const router = createRouter({
             path: '/solutions',
             component: SolutionPage
         },  
+        {
+            path: '/issueSlips',
+            component: IssueSlipPage
+        },  
+        {
+            path: '/issues',
+            component: IssuesPages
+        },  
         {
             path: '/clients',
             component: ClientsPage