added accounting pages and components

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>