From 81c3a78611b239c963827e5abf65b2fc5092b51d Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Tue, 28 Nov 2023 12:39:32 +0100
Subject: [PATCH] added components for production orders

---
 ...nceChecklist.vue => InstanceChecklist.vue} |   4 +-
 .../server/MaintenanceVisitsInstanceTable.vue |   2 +-
 .../server/MaintenanceVisitsTemplateTable.vue |   2 +-
 ...MaintenanceVisitsTemplateTableNoClient.vue |   2 +-
 .../server/ProductionOrdersInstance.vue       | 292 ++++++++++++++++++
 .../server/ProductionOrdersInstanceTable.vue  | 241 +++++++++++++++
 .../server/ProductionOrdersTemplate.vue       | 209 +++++++++++++
 .../server/ProductionOrdersTemplateTable.vue  | 185 +++++++++++
 .../ProductionOrdersTemplateTableNoClient.vue | 167 ++++++++++
 ...ateChecklist.vue => TemplateChecklist.vue} |   4 +-
 pages/clients.vue                             |   6 +-
 pages/maintenanceVisits.vue                   |  12 +-
 pages/productionOrders.vue                    |  39 ++-
 13 files changed, 1136 insertions(+), 29 deletions(-)
 rename components/server/{MaintenanceVisitsInstanceChecklist.vue => InstanceChecklist.vue} (97%)
 create mode 100644 components/server/ProductionOrdersInstance.vue
 create mode 100644 components/server/ProductionOrdersInstanceTable.vue
 create mode 100644 components/server/ProductionOrdersTemplate.vue
 create mode 100644 components/server/ProductionOrdersTemplateTable.vue
 create mode 100644 components/server/ProductionOrdersTemplateTableNoClient.vue
 rename components/server/{MaintenanceVisitsTemplateChecklist.vue => TemplateChecklist.vue} (96%)

diff --git a/components/server/MaintenanceVisitsInstanceChecklist.vue b/components/server/InstanceChecklist.vue
similarity index 97%
rename from components/server/MaintenanceVisitsInstanceChecklist.vue
rename to components/server/InstanceChecklist.vue
index 7d3399f..7a59823 100644
--- a/components/server/MaintenanceVisitsInstanceChecklist.vue
+++ b/components/server/InstanceChecklist.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
-        <table class="data-table" id="maintenance-visits-template-checkklist">
+        <table class="data-table" id="instance-checklist">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                 <th
                     :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
@@ -41,7 +41,7 @@
 <script>
 
 export default {
-    name: "MaintenanceVisitsInstanceChecklist",
+    name: "InstanceChecklist",
     data() {
         return {
             darkMode: true,
diff --git a/components/server/MaintenanceVisitsInstanceTable.vue b/components/server/MaintenanceVisitsInstanceTable.vue
index 11ea52b..0b88231 100644
--- a/components/server/MaintenanceVisitsInstanceTable.vue
+++ b/components/server/MaintenanceVisitsInstanceTable.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
-        <table class="data-table" name="asset-table">
+        <table class="data-table" name="maintenance-visits-instance-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>
diff --git a/components/server/MaintenanceVisitsTemplateTable.vue b/components/server/MaintenanceVisitsTemplateTable.vue
index 72a30b2..ae25212 100644
--- a/components/server/MaintenanceVisitsTemplateTable.vue
+++ b/components/server/MaintenanceVisitsTemplateTable.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
-        <table class="data-table" Name="asset-table">
+        <table class="data-table" name="maintenance-visits-template-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']">
diff --git a/components/server/MaintenanceVisitsTemplateTableNoClient.vue b/components/server/MaintenanceVisitsTemplateTableNoClient.vue
index 6dbae18..6d10733 100644
--- a/components/server/MaintenanceVisitsTemplateTableNoClient.vue
+++ b/components/server/MaintenanceVisitsTemplateTableNoClient.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
-        <table class="data-table" id="asset-table">
+        <table class="data-table" id="maintenance-visits-templat-table-no-client">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                 <th
                     :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
diff --git a/components/server/ProductionOrdersInstance.vue b/components/server/ProductionOrdersInstance.vue
new file mode 100644
index 0000000..7633eae
--- /dev/null
+++ b/components/server/ProductionOrdersInstance.vue
@@ -0,0 +1,292 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['production-orders-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+        <div class="production-orders-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="templateId-client" id="templateID">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="templateId-client" id="client">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="additional">
+                <div class="templateDescription">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateDescription">...</pre>
+                </div>
+            </div>
+            <div class="additional">
+                <div class="templateNotes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field-four" id="infoFour">
+                    <div class="ticketNo-asset-state-user" 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="ticketNo-asset-state-user" id="asset">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="creationDate-completionDate-timeSpent" id="creationDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="completionDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="timeSpent">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-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: "ProductionOrdersInstance",
+    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;
+}
+
+
+
+.production-orders-instance-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: 95%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.data-field-four {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 98.5%;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.ticketNo-asset-state-user {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.creationDate-completionDate-timeSpent,
+.templateId-client {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 0rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.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;
+}
+
+.production-orders-instance-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.instanceInfo,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.infoFour {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 98.5%;
+    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;
+}
+
+div#client {
+    padding-left: 2.9em;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.data#templateDescription,
+
+.data#templateNotes,
+.data#notes {
+    align-self: stretch;
+}
+
+.templateDescription,
+.templateNotes,
+.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>
\ No newline at end of file
diff --git a/components/server/ProductionOrdersInstanceTable.vue b/components/server/ProductionOrdersInstanceTable.vue
new file mode 100644
index 0000000..ebebf3f
--- /dev/null
+++ b/components/server/ProductionOrdersInstanceTable.vue
@@ -0,0 +1,241 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
+        <table class="data-table" name="production-orders-instance-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="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    Asset</th>
+                <th
+                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    State</th>
+                <th
+                    :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    Creation date</th>
+                <th
+                    :class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
+                    Completion 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="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    ...</td>
+                <td
+                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    ...</td>
+                <td
+                    :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                    ...</td>
+                <td
+                    :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
+                    ...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "ProductionOrdersInstanceTable",
+    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: 15.83%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.TicketNo {
+    width: 15.83%;
+}
+
+.TicketNo-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.TicketNo-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+
+.Asset {
+    width: 15.83%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.State {
+    width: 15.83%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CreationDate {
+    width: 15.83%;
+}
+
+.CreationDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CreationDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CompletionDate {
+    width: 15.83%;
+}
+
+.CompletionDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CompletionDate-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>
\ No newline at end of file
diff --git a/components/server/ProductionOrdersTemplate.vue b/components/server/ProductionOrdersTemplate.vue
new file mode 100644
index 0000000..d0f71d9
--- /dev/null
+++ b/components/server/ProductionOrdersTemplate.vue
@@ -0,0 +1,209 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
+        <div class="production-orders-template-data">
+            <div class="client-ID">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Client:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="data-field" id="ID">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="user">
+                <div class="data-field" id="empty">
+                   &nbsp;
+                </div>
+                <div class="data-field" id="user">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-template-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
+                </div>
+            </div>
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+    
+<script>
+
+export default {
+    name: "MaintenanceVisitsTemplate",
+    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;
+}
+
+
+
+.production-orders-template-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: 95%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.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;
+}
+
+.production-orders-template-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client-ID,
+.user {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+div#empty {
+    height: 3.6rem;
+}
+
+.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;
+}
+
+.div-darkmode,
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+
+.data#description,
+.data#notes {
+    align-self: stretch;
+}
+
+.description,
+.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>
\ No newline at end of file
diff --git a/components/server/ProductionOrdersTemplateTable.vue b/components/server/ProductionOrdersTemplateTable.vue
new file mode 100644
index 0000000..27e09a8
--- /dev/null
+++ b/components/server/ProductionOrdersTemplateTable.vue
@@ -0,0 +1,185 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
+        <table class="data-table" name="production-orders-template-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th
+                    :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                    Client</th>
+                <th
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
+                </th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td
+                    :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                    ...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "ProductionOrdersTemplateTable",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</script>
+  
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Client {
+    width: 33.3%;
+}
+
+.Client-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Client-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Name {
+    width: 33.3%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID {
+    width: 22.2%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    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>
\ No newline at end of file
diff --git a/components/server/ProductionOrdersTemplateTableNoClient.vue b/components/server/ProductionOrdersTemplateTableNoClient.vue
new file mode 100644
index 0000000..d1c1545
--- /dev/null
+++ b/components/server/ProductionOrdersTemplateTableNoClient.vue
@@ -0,0 +1,167 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
+        <table class="data-table" id="production-orders-template-table-no-client">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
+                </th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                    ...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "ProductionOrdersTemplateTableNoClient",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
+}
+
+</script>
+  
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Name {
+    width: 50%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID {
+    width: 40%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 10%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}</style>
\ No newline at end of file
diff --git a/components/server/MaintenanceVisitsTemplateChecklist.vue b/components/server/TemplateChecklist.vue
similarity index 96%
rename from components/server/MaintenanceVisitsTemplateChecklist.vue
rename to components/server/TemplateChecklist.vue
index b439586..45aba75 100644
--- a/components/server/MaintenanceVisitsTemplateChecklist.vue
+++ b/components/server/TemplateChecklist.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
-        <table class="data-table" id="maintenance-visits-template-checkklist">
+        <table class="data-table" id="template-checkklist">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                 <th :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">Step</th>
                 <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
@@ -23,7 +23,7 @@
 <script>
 
 export default {
-    name: "MaintenanceVisitsTemplateChecklist",
+    name: "TemplateChecklist",
     data() {
         return {
             darkMode: true,
diff --git a/pages/clients.vue b/pages/clients.vue
index 5070e7e..faf4d85 100644
--- a/pages/clients.vue
+++ b/pages/clients.vue
@@ -21,8 +21,8 @@ definePageMeta({
 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";
+//import ClientEmployees from "../components/server/ClientEmployees.vue";
+//import ClientEmployee from "../components/server/ClientEmployee.vue";
 
 export default {
   name: "ClientsPage",
@@ -30,8 +30,6 @@ export default {
     ClientTable,
     Client,
     ClientQuickAccess,
-    ClientEmployees,
-    ClientEmployee,
   },
   data() {
     return {
diff --git a/pages/maintenanceVisits.vue b/pages/maintenanceVisits.vue
index 2ca0a1e..fd48a45 100644
--- a/pages/maintenanceVisits.vue
+++ b/pages/maintenanceVisits.vue
@@ -29,11 +29,11 @@
         <MaintenanceVisitsTemplateTable />
         <MaintenanceVisitsTemplateTableNoClient />
         <MaintenanceVisitsTemplate />
-        <MaintenanceVisitsTemplateChecklist />
+        <TemplateChecklist />
         <TemplateSearch />
         <MaintenanceVisitsInstanceTable />
         <MaintenanceVisitsInstance />
-        <MaintenanceVisitsInstanceChecklist />
+        <InstanceChecklist />
       </div>
     </section>
   </template>
@@ -50,11 +50,11 @@
   import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
   import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
   import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
-  import MaintenanceVisitsTemplateChecklist from "../components/server/MaintenanceVisitsTemplateChecklist.vue";
+  import TemplateChecklist from "../components/server/TemplateChecklist.vue";
   import TemplateSearch from "../components/TemplateSearch.vue";
   import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
   import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
-  import MaintenanceVisitsInstanceChecklist from "../components/server/MaintenanceVisitsInstanceChecklist.vue";
+  import InstanceChecklist from "../components/server/InstanceChecklist.vue";
   
   export default {
     name: "MaintenanceVisitsPage",
@@ -63,11 +63,11 @@
       MaintenanceVisitsTemplateTable,
       MaintenanceVisitsTemplateTableNoClient,
       MaintenanceVisitsTemplate,
-      MaintenanceVisitsTemplateChecklist,
+      TemplateChecklist,
       TemplateSearch,
       MaintenanceVisitsInstanceTable,
       MaintenanceVisitsInstance,
-      MaintenanceVisitsInstanceChecklist,
+      InstanceChecklist,
     },
     data() {
       return {
diff --git a/pages/productionOrders.vue b/pages/productionOrders.vue
index 2fbcbc1..f692fde 100644
--- a/pages/productionOrders.vue
+++ b/pages/productionOrders.vue
@@ -25,10 +25,15 @@
             </router-link>
         </div>
         <div id="content-body">
-            <IssueTable />
-            <Issue />
-            <IssueVariants />
-            <IssueVariant />
+            <ClientSearch />
+            <ProductionOrdersTemplateTable />
+            <ProductionOrdersTemplateTableNoClient />
+            <ProductionOrdersTemplate />
+            <TemplateChecklist />
+            <TemplateSearch />
+            <ProductionOrdersInstanceTable />
+            <ProductionOrdersInstance />
+            <InstanceChecklist />
         </div>
     </section>
 </template>
@@ -41,18 +46,28 @@ definePageMeta({
 </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";
+import ClientSearch from "../components/ClientSearch.vue";
+import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
+import ProductionOrdersTemplateTableNoClient from "../components/server/ProductionOrdersTemplateTableNoClient.vue";
+import ProductionOrdersTemplate from "../components/server/ProductionOrdersTemplate.vue";
+import TemplateChecklist from "../components/server/TemplateChecklist.vue";
+import TemplateSearch from "../components/TemplateSearch.vue";
+import ProductionOrdersInstanceTable from "../components/server/ProductionOrdersInstanceTable.vue";
+import ProductionOrdersInstance from "../components/server/ProductionOrdersInstance.vue";
+import InstanceChecklist from "../components/server/InstanceChecklist.vue";
 
 export default {
     name: "ProductionOrdersPage",
     components: {
-        IssueTable,
-        Issue,
-        IssueVariants,
-        IssueVariant,
+        ClientSearch,
+        ProductionOrdersTemplateTable,
+        ProductionOrdersTemplateTableNoClient,
+        ProductionOrdersTemplate,
+        TemplateChecklist,
+        TemplateSearch,
+        ProductionOrdersInstanceTable,
+        ProductionOrdersInstance,
+        InstanceChecklist,
     },
     data() {
         return {