From c327355c8a02d004a1d0b0d0ceac2c6022290258 Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Tue, 27 Feb 2024 10:31:03 +0100
Subject: [PATCH] basic functionality pot implemented

---
 backend/models/configItemsModel.js            |   4 +-
 backend/models/customerModel.js               |   2 +-
 backend/models/issueSlipsModel.js             |   2 +-
 backend/models/issueVariantsModel.js          |   2 +-
 backend/models/maintenanceVisitsModel.js      |   6 +-
 .../models/masterMaintenanceVisitsModel.js    |   4 +-
 backend/models/masterProductionOrdersModel.js |   7 +-
 backend/models/productionOrdersModel.js       |   8 +-
 backend/models/solutionsModel.js              |   8 +-
 components/ClientSearch.vue                   |   8 +-
 components/server/Asset.vue                   |  22 +-
 components/server/AssetTable.vue              |  11 +-
 components/server/HardwareSpecifications.vue  |   8 +-
 components/server/NetworkSpecifications.vue   |  14 +-
 .../server/ProductionOrdersTemplate.vue       | 294 +++++++++++++++++-
 .../server/ProductionOrdersTemplateTable.vue  | 137 +++++++-
 components/server/SoftwareSpecifications.vue  |   8 +-
 components/server/TemplateChecklist.vue       | 122 +++++++-
 layouts/Actionbar.vue                         |  18 +-
 layouts/Navigationbar.vue                     |   9 +-
 middleware/auth.js                            |  12 -
 pages/productionOrders.vue                    |  16 +-
 plugins/vuex.js                               | 246 ++++++++++-----
 server/api/addPOT.ts                          |  21 ++
 .../api/deleteProductionOrderTemplate/[id].ts |  22 ++
 server/api/getProductionOrderTemplate/[id].ts |  22 ++
 server/api/getSelectedPOTsByClient/[id].ts    |  22 ++
 server/api/getSelectedPOTsByPOT/[id].ts       |  22 ++
 server/api/updateProductionOrderTemplate.ts   |  13 +
 server/middleware/productionOrderTemplates.ts | 212 ++++++++++++-
 30 files changed, 1113 insertions(+), 189 deletions(-)
 delete mode 100644 middleware/auth.js
 create mode 100644 server/api/addPOT.ts
 create mode 100644 server/api/deleteProductionOrderTemplate/[id].ts
 create mode 100644 server/api/getProductionOrderTemplate/[id].ts
 create mode 100644 server/api/getSelectedPOTsByClient/[id].ts
 create mode 100644 server/api/getSelectedPOTsByPOT/[id].ts
 create mode 100644 server/api/updateProductionOrderTemplate.ts

diff --git a/backend/models/configItemsModel.js b/backend/models/configItemsModel.js
index aecf8bd..373efc5 100644
--- a/backend/models/configItemsModel.js
+++ b/backend/models/configItemsModel.js
@@ -89,7 +89,7 @@ export const insertConfigItem = async (data, result) => {
 //get all selected config items by customer
 export const getSelectedConfigItemsByCustomer = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM changedb WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+    let sql = `SELECT * FROM changedb WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -103,7 +103,7 @@ export const getSelectedConfigItemsByCustomer = async (selected, result) => {
 //get all selected config items by asset name
 export const getSelectedConfigItemsByAssetName = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM changedb WHERE assetName LIKE '%${selected}%' ORDER BY assetName ASC`;
+    let sql = `SELECT * FROM changedb WHERE LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
diff --git a/backend/models/customerModel.js b/backend/models/customerModel.js
index 3a29adf..a0ec0a9 100644
--- a/backend/models/customerModel.js
+++ b/backend/models/customerModel.js
@@ -17,7 +17,7 @@ export const getCustomers = async (result) => {
 //get all selected customers
 export const getSelectedCustomers = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM customers WHERE customername LIKE '%${selected}%' ORDER BY customername ASC`;
+        let sql = `SELECT * FROM customers WHERE LOWER(customername) LIKE '%${selected.toLowerCase()}%' ORDER BY customername ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
diff --git a/backend/models/issueSlipsModel.js b/backend/models/issueSlipsModel.js
index 92c01e8..c1cd9e2 100644
--- a/backend/models/issueSlipsModel.js
+++ b/backend/models/issueSlipsModel.js
@@ -31,7 +31,7 @@ export const getSelectedIssueSlipsByTicketnumber = async (selected, result) => {
 //get all selected issue slips by customer
 export const getSelectedIssueSlipsByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM issueslips WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM issueslips WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
diff --git a/backend/models/issueVariantsModel.js b/backend/models/issueVariantsModel.js
index 88ef620..b7ac8ba 100644
--- a/backend/models/issueVariantsModel.js
+++ b/backend/models/issueVariantsModel.js
@@ -45,7 +45,7 @@ export const getSelectedIssueVariantsByIssueId = async (selected, result) => {
 //get all selected issue variants by name
 export const getSelectedIssueVariantsByName = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM issuevariants WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM issuevariants WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
diff --git a/backend/models/maintenanceVisitsModel.js b/backend/models/maintenanceVisitsModel.js
index b6d851a..3c19e48 100644
--- a/backend/models/maintenanceVisitsModel.js
+++ b/backend/models/maintenanceVisitsModel.js
@@ -17,7 +17,7 @@ export const getMaintenanceVisits = async (result) => {
 //get all selected maintenance visits by checklistname
 export const getSelectedMaintenanceVisitsByChecklistname = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenancevisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -31,7 +31,7 @@ export const getSelectedMaintenanceVisitsByChecklistname = async (selected, resu
 //get all selected maintenance visits by customer
 export const getSelectedMaintenanceVisitsByCustomer = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenancevisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -59,7 +59,7 @@ export const getSelectedMaintenanceVisitsByDate = async (selected, result) => {
 //get all selected maintenance visits by state
 export const getSelectedMaintenanceVisitsByState = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenancevisits WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE LOWER(state) LIKE '%${selected.toLowerCase()}%' ORDER BY state ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
diff --git a/backend/models/masterMaintenanceVisitsModel.js b/backend/models/masterMaintenanceVisitsModel.js
index 758efcc..44b98d0 100644
--- a/backend/models/masterMaintenanceVisitsModel.js
+++ b/backend/models/masterMaintenanceVisitsModel.js
@@ -17,7 +17,7 @@ export const getMasterMaintenanceVisits = async (result) => {
 //get all selected master maintenance visits by customer
 export const getSelectedMasterMaintenanceVisitsByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM mastermaintenancevisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -31,7 +31,7 @@ export const getSelectedMasterMaintenanceVisitsByCustomer = async (selected, res
 //get all selected master maintenance visits by checklistname
 export const getSelectedMasterMaintenanceVisitsByChecklistname = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM mastermaintenancevisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
diff --git a/backend/models/masterProductionOrdersModel.js b/backend/models/masterProductionOrdersModel.js
index 6edd49d..57936e6 100644
--- a/backend/models/masterProductionOrdersModel.js
+++ b/backend/models/masterProductionOrdersModel.js
@@ -17,7 +17,7 @@ export const getMasterProductionOrders = async (result) => {
 //get all selected master production orders by customer
 export const getSelectedMasterProductionOrdersByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM masterproductionorders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM masterproductionorders WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -31,7 +31,7 @@ export const getSelectedMasterProductionOrdersByCustomer = async (selected, resu
 //get all selected master production orders by checklistname
 export const getSelectedMasterProductionOrdersByChecklistname = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM masterproductionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM masterproductionorders WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -62,6 +62,7 @@ export const updateMasterProductionOrderById = async (data, result) => {
         const id = data.templateID;
         let sql = `UPDATE masterproductionorders SET name = ?, customerID = ? , customer = ?, lastView = ?, user = ?, description = ?, notes = ? WHERE templateID = ?`;
         const results = await ownConn.query(sql, [data.name, data.customerID, data.customer, data.lastView, data.user, data.description, data.notes, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -75,6 +76,7 @@ export const updateMasterProductionOrderById = async (data, result) => {
 export const insertMasterProductionOrder = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO masterproductionorders(name, customerID, customer, lastView, user, description, notes) VALUES(?, ?, ?, ?, ?, ?, ?)`, [data.name, data.customerID, data.customer, data.lastView, data.user, data.description, data.notes])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -89,6 +91,7 @@ export const deleteMasterProductionOrderById = async (id, result) => {
     try {
         let sql = `DELETE FROM masterproductionorders WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
diff --git a/backend/models/productionOrdersModel.js b/backend/models/productionOrdersModel.js
index 7823c73..378874e 100644
--- a/backend/models/productionOrdersModel.js
+++ b/backend/models/productionOrdersModel.js
@@ -31,7 +31,7 @@ export const getSelectedProductionOrdersByTicketnumber = async (selected, result
 //get all selected production orders by customer
 export const getSelectedProductionOrdersByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionorders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM productionorders WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -45,7 +45,7 @@ export const getSelectedProductionOrdersByCustomer = async (selected, result) =>
 //get all selected production orders by state
 export const getSelectedProductionOrdersByState = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionorders WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
+        let sql = `SELECT * FROM productionorders WHERE LOWER(state) LIKE '%${selected.toLowerCase()}%' ORDER BY state ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -59,7 +59,7 @@ export const getSelectedProductionOrdersByState = async (selected, result) => {
 //get all selected production orders by checklistname
 export const getSelectedProductionOrdersByChecklistname = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM productionorders WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -102,6 +102,7 @@ export const deleteProductionOrderById = async (id, result) => {
 export const insertProductionOrder = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO productionorders(name, templateID, customer, customerID, asset, state, creationDate, completionDate, user, templateDescription, templateNotes, timeSpent, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.name, data.templateID, data.customer, data.customerID, data.asset, data.state, data.creationDate, data.completionDate, data.user, data.templateDescription, data.templateNotes, data.timeSpent, data.notes])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -145,6 +146,7 @@ export const updateProductionOrderStateById = async (data, result) => {
     try {
         let sql = `UPDATE productionorders SET state = ? WHERE ticketNumber = ?`;
         const results = await ownConn.query(sql, [data.state, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
diff --git a/backend/models/solutionsModel.js b/backend/models/solutionsModel.js
index f830c48..1458755 100644
--- a/backend/models/solutionsModel.js
+++ b/backend/models/solutionsModel.js
@@ -73,7 +73,7 @@ export const updateSolutionById = async (data, result) => {
 //get all selected solutions by customer
 export const getSelectedSolutionsByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM solutions WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -86,7 +86,7 @@ export const getSelectedSolutionsByCustomer = async (selected, result) => {
 
 //get all selected solutions by solution name
 export const getSelectedSolutionsBySolutionName = async (selected, result) => {
-    let sql = `SELECT * FROM solutions WHERE solutionName LIKE '%${selected}%' ORDER BY solutionName ASC`;
+    let sql = `SELECT * FROM solutions WHERE LOWER(solutionName) LIKE '%${selected.toLowerCase()}%' ORDER BY solutionName ASC`;
     try {
         const results = await ownConn.execute(sql)
         result(null, results);
@@ -101,7 +101,7 @@ export const getSelectedSolutionsBySolutionName = async (selected, result) => {
 //get all selected solutions by asset name
 export const getSelectedSolutionsByAssetName = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE assetName LIKE '%${selected}%' ORDER BY assetName ASC`;
+        let sql = `SELECT * FROM solutions WHERE LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -115,7 +115,7 @@ export const getSelectedSolutionsByAssetName = async (selected, result) => {
 //get all selected solutions by type
 export const getSelectedSolutionsByType = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE type LIKE '%${selected}%' ORDER BY solutionName ASC`;
+        let sql = `SELECT * FROM solutions WHERE LOWER(type) LIKE '%${selected.toLowerCase()}%' ORDER BY solutionName ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
diff --git a/components/ClientSearch.vue b/components/ClientSearch.vue
index 9feaffd..b41ac05 100644
--- a/components/ClientSearch.vue
+++ b/components/ClientSearch.vue
@@ -13,9 +13,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const filtered = computed(() => store.state.assetFiltered);
-const filteredTerm = computed(() => store.state.filteredAssetbyClient);
-const clientFilter = ref(store.state.filteredAssetbyClient);
+const filtered = computed(() => store.state.filtered);
+const filteredTerm = computed(() => store.state.filteredByClient);
+const clientFilter = ref(store.state.filteredByClient);
 
 const darkMode = ref(true)
 
@@ -26,7 +26,7 @@ const updateFilterTerm = () => {
 
 // update the filtered term in the store
 const filterConfigItemList = () => {
-  store.commit('updateAssetFilterbyClient', clientFilter.value);
+  store.commit('updateFilterbyClient', clientFilter.value);
 }
 
 watch(filteredTerm, updateFilterTerm)
diff --git a/components/server/Asset.vue b/components/server/Asset.vue
index 8e482dd..77de5a1 100644
--- a/components/server/Asset.vue
+++ b/components/server/Asset.vue
@@ -1,5 +1,5 @@
 <template>
-    <section v-if="!addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
             item.assetName }}</h2>
         <input v-if="editable" v-model="item.assetName" @change="updateConfigItem()"
@@ -77,7 +77,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <input v-model="newAssetName" @change="updateAsset()"
             :class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="asset-data">
@@ -153,10 +153,10 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.assetEditable);
+const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const deleteAssetBool = computed(() => store.state.deleteAsset);
-const addAssetBool = computed(() => store.state.newAsset);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
 
 const darkMode = ref(true);
 const item = ref({});
@@ -176,7 +176,7 @@ const newState = ref('');
 
 // get config item from id
 const getItemById = async () => {
-    if (!addAssetBool.value) {
+    if (!addBool.value) {
         try {
             const response = await Axios.get(
                 `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
@@ -200,7 +200,7 @@ const updateAsset = () => {
         description: newDescription.value,
         notes: newNotes.value,
         state: newState.value
-    }; 
+    };
     store.commit('updateAssetComponent', asset);
 }
 
@@ -275,17 +275,17 @@ const getCustomers = async () => {
 }
 
 const confirmDeleteAsset = async () => {
-    if (deleteAssetBool.value === true) {
+    if (deleteBool.value === true) {
         if (confirm("Do you really want to delete this config item? It cannot be undone!")) {
             try {
                 await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteConfigItem/${chosenAssetId.value}`);
-                store.commit('undoDeleteAsset');
+                store.commit('undoDelete');
                 store.commit('changeToAssetlist');
             } catch (err) {
                 console.log(err.response.statusText);
             }
         } else {
-            store.commit('undoDeleteAsset');
+            store.commit('undoDelete');
         }
     }
 }
@@ -330,7 +330,7 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteAssetBool, confirmDeleteAsset);
+watch(deleteBool, confirmDeleteAsset);
 
 onMounted(() => {
     getItemById();
diff --git a/components/server/AssetTable.vue b/components/server/AssetTable.vue
index bead5ef..e75f8cb 100644
--- a/components/server/AssetTable.vue
+++ b/components/server/AssetTable.vue
@@ -1,5 +1,5 @@
 <template>
-    <section v-if="assetSearchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="searchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
         <input v-model="assetSearchFilter" @change="searchConfigItem()"
             :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
@@ -31,9 +31,6 @@
                     </td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        <!-- <router-link to="/assets" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" > {{
-                                item.assetName }} </router-link> -->
                         <nuxt-link to="/assets" id="nuxt-link" class="button"
                             :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
                             @click="goToChosenAsset(item.primaryID)">
@@ -66,8 +63,8 @@ const goToChosenAsset = (id) => {
     store.commit('setChosenAsset', id);
     store.commit('changeToAsset');
 };
-const clientFilter = computed(() => store.state.filteredAssetbyClient);
-const assetSearchable = computed(() => store.state.assetSearchable);
+const clientFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
 
 const assetSearchFilter = ref('');
 const darkMode = ref(true)
@@ -118,7 +115,7 @@ const searchConfigItem = async () => {
 }
 
 watch(clientFilter, getConfigItems);
-watch(assetSearchable, updateSearchTerm);
+watch(searchable, updateSearchTerm);
 
 onMounted(async () => {
     await getConfigItems();
diff --git a/components/server/HardwareSpecifications.vue b/components/server/HardwareSpecifications.vue
index 1b8bfce..307039c 100644
--- a/components/server/HardwareSpecifications.vue
+++ b/components/server/HardwareSpecifications.vue
@@ -1,5 +1,5 @@
 <template>
-    <section v-if="hardwareBoolean && !addAssetBool"
+    <section v-if="hardwareBoolean && !addBool"
         :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
         <div class="asset-data">
@@ -54,7 +54,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
         <div class="asset-data">
             <div class="model-CPU">
@@ -111,9 +111,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.assetEditable);
+const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const addAssetBool = computed(() => store.state.newAsset);
+const addBool = computed(() => store.state.new);
 
 const newHardwareBool = ref(true);
 const newModel = ref('');
diff --git a/components/server/NetworkSpecifications.vue b/components/server/NetworkSpecifications.vue
index 0b07b48..c541778 100644
--- a/components/server/NetworkSpecifications.vue
+++ b/components/server/NetworkSpecifications.vue
@@ -1,5 +1,5 @@
 <template>
-    <section v-if="networkBoolean && !addAssetBool"
+    <section v-if="networkBoolean && !addBool"
         :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
         <div class="asset-data">
@@ -37,7 +37,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
         <div class="asset-data">
             <div class="IPv4-MAC">
@@ -66,7 +66,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" id="saveNewItem">
+    <section v-if="addBool" id="saveNewItem">
         <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Safe</button>
     </section>
 </template>
@@ -80,9 +80,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.assetEditable);
+const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const addAssetBool = computed(() => store.state.newAsset);
+const addBool = computed(() => store.state.new);
 const newAssetName = computed(() => store.state.newAssetName);
 const newCustomerID = computed(() => store.state.newCustomerID);
 const newCustomer = computed(() => store.state.newCustomer);
@@ -120,7 +120,7 @@ const configItems = ref([]);
 
 // get config item from id
 const getItemById = async () => {
-    if (!addAssetBool.value) {
+    if (!addBool.value) {
         try {
             const response = await Axios.get(
                 `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
@@ -332,7 +332,7 @@ const addItem = async () => {
                 MAC: newMAC.value,
                 subnetmask: newSubnetmask.value,
             });
-        store.commit('resetAssetStore');
+        store.commit('resetStore');
         store.commit('changeToAssetlist');
     } catch (err) {
         console.log(err.response.statusText);
diff --git a/components/server/ProductionOrdersTemplate.vue b/components/server/ProductionOrdersTemplate.vue
index 42195d4..df6ffe9 100644
--- a/components/server/ProductionOrdersTemplate.vue
+++ b/components/server/ProductionOrdersTemplate.vue
@@ -1,11 +1,70 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 v-if="!editable" :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+            pot.name }}</h2>
+        <input v-if="editable" v-model="pot.name" @change="updatePOT()"
+            :class="['data', 'pot-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <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>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ pot.customer }}</pre>
+                    <select v-if="editable" id="customersDropDownChosenCI" v-model="pot.customer"
+                        @change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                        <option v-for="cust in customers" :key="cust.primaryID">
+                            {{ cust.customername }}
+                        </option>
+                    </select>
+                </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']">{{ pot.templateID }}</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 v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ pot.user }}</pre>
+                    <input v-if="editable" v-model="pot.user" @change="updatePOT()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </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>
+                    <input v-model="pot.description" :readonly="!editable" @change="updatePOT()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="pot.notes" :readonly="!editable" @change="updatePOT()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <input v-model="newName" @change="updateProductionOrder()"
+            :class="['data', 'production-orders-template-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="production-orders-template-data">
+            <div class="client-ID">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
+                        :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                        <option v-for="cust in customers" :key="cust.primaryID">
+                            {{ cust.customername }}
+                        </option>
+                    </select>
                 </div>
                 <div class="data-field" id="ID">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
@@ -18,7 +77,8 @@
                 </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>
+                    <input v-model="newUser" @change="updateProductionOrder()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
@@ -26,24 +86,190 @@
             <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>
+                    <input v-model="newDescription" @change="updateProductionOrder()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
                 </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>
+                    <input v-model="newNotes" @change="updateProductionOrder()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
                 </div>
             </div>
         </div>
     </section>
 </template>
     
-    
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const editable = computed(() => store.state.editable);
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
+const darkMode = ref(true);
+const pot = ref({});
+const customers = ref([]);
+const customer = ref({});
+const productionOrderTemplates = ref([]);
+
+const newName = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newUser = ref('');
+const newDescription = ref('');
+const newNotes = ref('');
+
+//get all customers
+const getCustomers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
+        );
+        customers.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const confirmDeletePOT = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this production order template? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteProductionOrderTemplate/${chosenPOTId.value}`);
+                store.commit('undoDelete');
+                store.commit('changeToTemplatelist');
+            } catch (err) {
+                // console.log(err.response.statusText);
+                console.log(err);
+            }
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//get all productionOrder templates todos
+const getProductionOrderTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+        productionOrderTemplates.value = response.data;
+    } catch (err) {
+        // console.log(err.response.statusText);
+        console.log(err);
+
+    }
+}
+
+//update data
+const updatePOT = async () => {
+    if (pot.value.name.trim() === "") {
+        alert("Please add a production order template name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if production order template name already exists
+        productionOrderTemplates.value.forEach(p => {
+            if (p.name === pot.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This production order template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
+            pot.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateProductionOrderTemplate`,
+                {
+                    templateID: pot.value.templateID,
+                    name: pot.value.name,
+                    customerID: pot.value.customerID,
+                    customer: pot.value.customer,
+                    lastView: pot.value.lastView,
+                    user: pot.value.user,
+                    description: pot.value.description,
+                    notes: pot.value.notes,
+                }
+            )
+            await getPOTById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update customerid if customer was changed
+const updateCustomerID = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${pot.value.customer}`);
+        customer.value = response.data;
+        pot.value.customerID = customer.value.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await updatePOT();
+}
+
+// get production order template from id
+const getPOTById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            pot.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update customerid if customer was changed
+const updateNewCustomerID = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
+        newCustomerID.value = response.data.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    updateProductionOrder();
+}
+
+// update production order template fields in the store
+const updateProductionOrder = () => {
+    const productionOrderTemplate = {
+        name: newName.value,
+        customerId: newCustomerID.value,
+        customer: newCustomer.value,
+        user: newUser.value,
+        description: newDescription.value,
+        notes: newNotes.value
+    };
+    store.commit('updateProductionOrderTemplateComponent', productionOrderTemplate);
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(deleteBool, confirmDeletePOT);
+
+onMounted(() => {
+    getPOTById();
+    getProductionOrderTemplates();
+    triggerBackendCallsWithDelay(getCustomers);
+});
 </script>
 
 <script>
@@ -73,7 +299,15 @@ export default {
     background-color: #fff;
 }
 
-
+.pot-name-input {
+    padding: 1rem 0;
+    margin: 1rem;
+    font-size: initial;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
 
 .production-orders-template-name {
     align-self: stretch;
@@ -84,6 +318,16 @@ export default {
         sans-serif;
 }
 
+.production-orders-template-name-input {
+    padding: 1rem 0;
+    margin: 1rem;
+    font-size: initial;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
 .h2-darkmode {
     color: #fff;
 }
@@ -98,7 +342,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 95%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }
@@ -137,6 +381,18 @@ export default {
     color: #000;
 }
 
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.input {
+    border: none;
+}
+
 .production-orders-template-data {
     display: flex;
     flex-direction: row;
@@ -145,6 +401,22 @@ export default {
     align-self: stretch;
 }
 
+.select-darkmode {
+    border: none;
+    color: white;
+    background: #212121;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.select-lightmode {
+    border: none;
+    color: black;
+    background: #EBEBEB;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
 .client-ID,
 .user {
     display: flex;
diff --git a/components/server/ProductionOrdersTemplateTable.vue b/components/server/ProductionOrdersTemplateTable.vue
index c293e60..f091246 100644
--- a/components/server/ProductionOrdersTemplateTable.vue
+++ b/components/server/ProductionOrdersTemplateTable.vue
@@ -1,4 +1,9 @@
 <template>
+    <section v-if="searchable" :class="['pot-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
+        <input v-model="potSearchFilter" @change="searchPOT()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <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">
@@ -23,7 +28,12 @@
                         {{ template.customer }}</td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        {{ template.name }}</td>
+                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenPOT(template.templateID)">
+                            {{ template.name }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         {{ template.templateID }}</td>
@@ -36,25 +46,75 @@
   
   
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+// get accesss to the store
+const store = useStore()
+const goToChosenPOT = (id) => {
+    store.commit('setChosenPOT', id);
+    store.commit('changeToTemplate');
+};
+
+const clientFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
+
+const potSearchFilter = ref('');
+const darkMode = ref(true);
 const productionOrderTemplates = ref([]);
 
 //get all productionOrder templates
 const getProductionOrderTemplates = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredPOTByClient();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+            productionOrderTemplates.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all productionOrder templates based on the searched pot name
+const searchPOT = async () => {
+    if (potSearchFilter.value === '') {
+        await getProductionOrderTemplates();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOTsByPOT/${potSearchFilter.value}`);
+            productionOrderTemplates.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    potSearchFilter.value = '';
+    await getProductionOrderTemplates();
+}
+
+//get all productionOrder templates based on the searched client
+const getFilteredPOTByClient = async () => {
     try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOTsByClient/${clientFilter.value}`);
         productionOrderTemplates.value = response.data;
     } catch (err) {
         console.log(err.response.statusText);
     }
 }
 
-onMounted(() => {
-    getProductionOrderTemplates();
+watch(clientFilter, getProductionOrderTemplates);
+watch(searchable, updateSearchTerm);
+
+onMounted(async () => {
+    await getProductionOrderTemplates();
 });
 </script>
 
@@ -66,6 +126,18 @@ export default {
     
     
 <style scoped>
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.input {
+    border: none;
+}
+
 .data {
     display: flex;
     flex-direction: column;
@@ -79,6 +151,17 @@ export default {
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
+.dataInput {
+    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;
+}
+
 .div-darkmode {
     background-color: #2c2c2c;
 }
@@ -94,6 +177,11 @@ export default {
     border-collapse: collapse;
 }
 
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;
@@ -108,6 +196,16 @@ export default {
     border-bottom: 0.0625rem solid #000000;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .tr-head-lightmode {
     border-top: none;
     border-bottom: 0.0625rem solid #8e8e8e;
@@ -130,6 +228,19 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.pot-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
+
 .th-darkmode,
 .td-darkmode {
     color: #ffffff;
@@ -201,4 +312,16 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}
+
+.clientLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+</style>
\ No newline at end of file
diff --git a/components/server/SoftwareSpecifications.vue b/components/server/SoftwareSpecifications.vue
index 9f6a619..0004cf6 100644
--- a/components/server/SoftwareSpecifications.vue
+++ b/components/server/SoftwareSpecifications.vue
@@ -1,5 +1,5 @@
 <template>
-    <section v-if="softwareBoolean && !addAssetBool"
+    <section v-if="softwareBoolean && !addBool"
         :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
             <div class="asset-data">
@@ -44,7 +44,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
@@ -89,9 +89,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.assetEditable);
+const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const addAssetBool = computed(() => store.state.newAsset);
+const addBool = computed(() => store.state.new);
 
 const newSoftwareBool = ref(true);
 const newSoftware = ref('');
diff --git a/components/server/TemplateChecklist.vue b/components/server/TemplateChecklist.vue
index 9b6be34..0e9bead 100644
--- a/components/server/TemplateChecklist.vue
+++ b/components/server/TemplateChecklist.vue
@@ -30,13 +30,97 @@
             </tbody>
         </table>
     </div>
+    <section v-if="addBool" id="saveNewPOT">
+        <button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Safe</button>
+    </section>
 </template>
   
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const addBool = computed(() => store.state.new);
+
+const newNamePOT = computed(() => store.state.newNamePOT);
+const newCustomerIDPOT = computed(() => store.state.newCustomerIDPOT);
+const newCustomerPOT = computed(() => store.state.newCustomerPOT);
+const newLastViewPOT = computed(() => store.state.newLastViewPOT);
+const newUserPOT = computed(() => store.state.newUserPOT);
+const newDescriptionPOT = computed(() => store.state.newDescriptionPOT);
+const newNotesPOT = computed(() => store.state.newNotesPOT);
 
 const darkMode = ref(true)
+const productionOrderTemplates = ref([]);
+
+// add new production order template
+const addPOT = async () => {
+    // check if all input data is valid
+    if (newNamePOT.value.trim() === "") {
+        alert("Please add a production order template name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(productionOrderTemplates.value.length == null)) {
+            // check if production order template name already exists
+            productionOrderTemplates.value.forEach(pot => {
+                if (pot.name === newNamePOT.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This production order template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerPOT.value.length === 0) {
+        alert("Please choose a client!");
+        return;
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addPOT`,
+            {
+                name: newNamePOT.value,
+                customerID: newCustomerIDPOT.value,
+                customer: newCustomerPOT.value,
+                lastView: newLastViewPOT.value,
+                user: newUserPOT.value,
+                description: newDescriptionPOT.value,
+                notes: newNotesPOT.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToTemplatelist');
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all production order templates
+const getProductionOrderTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+        productionOrderTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1000);
+}
+
+onMounted(() => {
+    triggerBackendCallsWithDelay(getProductionOrderTemplates);
+
+});
 </script>
 
 <script>
@@ -183,4 +267,40 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+.saveNewPOT-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewPOT-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewPOT-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewPOT-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewPOT {
+    text-align: center;
+}
 </style>
\ No newline at end of file
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index f1c7dad..d064ed9 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -52,7 +52,7 @@
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
         <div class="icon" id="new-icon">
           <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
@@ -68,7 +68,7 @@
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
         <div class="icon" id="delete-icon">
           <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg" />
         </div>
@@ -90,23 +90,23 @@ const isExpanded = ref(true)
 // get accesss to the store
 const store = useStore()
 const toggleEditable = () => {
-  store.commit('toggleEditableAsset');
+  store.commit('toggleEditable');
 };
-const deleteAsset = () => {
-  store.commit('doDeleteAsset');
+const deleteFunc = () => {
+  store.commit('doDelete');
 };
 
 const toggleActionbar = () => {
   isExpanded.value = !isExpanded.value;
 };
 const toggleFiltered = () => {
-  store.commit('toggleFilteredAsset');
+  store.commit('toggleFiltered');
 };
 const toggleSearched = () => {
-  store.commit('toggleAssetSearchable');
+  store.commit('toggleSearchable');
 };
-const addAsset = () => {
-  store.commit('addNewAsset');
+const add = () => {
+  store.commit('add');
 };
 </script>
 
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index eb77c15..42173ac 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -20,7 +20,7 @@
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultProductionOrderPage()" id="checklists-button">
           <div class="icon" id="checklists-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
           </div>
@@ -77,10 +77,15 @@ const isExpanded = ref(true)
 // get accesss to the store
 const store = useStore()
 const defaultAssetPage = () => {
-  store.commit('resetAssetStore');
+  store.commit('resetStore');
   store.commit('changeToAssetlist');
 };
 
+const defaultProductionOrderPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToTemplatelist')
+}
+
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };
diff --git a/middleware/auth.js b/middleware/auth.js
deleted file mode 100644
index 22abc8d..0000000
--- a/middleware/auth.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// export default function ({ route, redirect }) {
-//     // Check if user is not authenticated and trying to access a page other than /login
-//     if (!isAuthenticated() && route.path !== '/login') {
-//       return redirect('/login');
-//     }
-//   }
-  
-//   function isAuthenticated() {
-//     // Implement authentication logic 
-//     return false
-//     // Return true if authenticated, false otherwise
-//   }
\ No newline at end of file
diff --git a/pages/productionOrders.vue b/pages/productionOrders.vue
index fc0e3fb..5ff7d14 100644
--- a/pages/productionOrders.vue
+++ b/pages/productionOrders.vue
@@ -51,19 +51,21 @@ 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";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const onTemplatelist = computed(() => store.state.onTemplatelist);
+const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
+const onTemplate = computed(() => store.state.onTemplate);
+const onInstancelist = computed(() => store.state.onInstancelist);
+const onInstance = computed(() => store.state.onInstance);
 
 definePageMeta({
     layout: 'default'
 })
 
 const darkMode = ref(true)
-
-// to render the right components
-const onTemplatelist = ref(true)
-const onCustomerTemplatelist = ref(false)
-const onTemplate = ref(false)
-const onInstancelist = ref(false)
-const onInstance = ref(false)
 </script>
   
 <script>
diff --git a/plugins/vuex.js b/plugins/vuex.js
index 7eb420a..2f7ede7 100644
--- a/plugins/vuex.js
+++ b/plugins/vuex.js
@@ -3,17 +3,18 @@ import { createStore } from "vuex";
 const store = createStore({
     state() {
         return {
-            assetEditable: false,
-            assetFiltered: false,
-            assetSearchable: false,
-            deleteAsset: false,
+            editable: false,
+            filtered: false,
+            searchable: false,
+            deleteBool: false,
+            new: false,
+            filteredByClient: '',
+
             onAssetlist: true,
             onCustomerAssetlist: false,
             onAsset: false,
             onSolutionlistAsset: false,
             chosenAssetId: -1,
-            filteredAssetbyClient: '',
-            newAsset: false,
             newAssetName: '',
             newCustomerID: '',
             newCustomer: '',
@@ -36,20 +37,47 @@ const store = createStore({
             newSoftware: '',
             newVersion: '',
             newLicense: '',
+
+            onTemplatelist: true,
+            onCustomerTemplatelist: false,
+            onTemplate: false,
+            onInstancelist: false,
+            onInstance: false,
+            newNamePOT: '',
+            newCustomerIDPOT: '',
+            newCustomerPOT: '',
+            newLastViewPOT: '',
+            newUserPOT: '',
+            newDescriptionPOT: '',
+            newNotesPOT: '',
+            chosenPOTId: -1,
+
         };
     },
     mutations: {
-        toggleEditableAsset(state) {
-            state.assetEditable = !state.assetEditable
+        // functions to toggle with the actionbar
+        toggleEditable(state) {
+            state.editable = !state.editable
         },
-        toggleFilteredAsset(state) {
-            if (state.assetFiltered == false) {
-                state.assetFiltered = true
-                state.assetSearchable = false
+        toggleFiltered(state) {
+            if (state.filtered == false) {
+                state.filtered = true
+                state.searchable = false
             } else {
-                state.assetFiltered = false
+                state.filtered = false
             }
         },
+        toggleSearchable(state) {
+            if (state.searchable == false) {
+                state.searchable = true
+                state.filtered = false
+            } else {
+                state.searchable = false
+            }
+            state.filteredByClient = ''
+        },
+
+        // functions to change the asset pages
         changeToAssetlist(state) {
             state.onAssetlist = true
             state.onCustomerAssetlist = false
@@ -74,68 +102,45 @@ const store = createStore({
             state.onAsset = false
             state.onSolutionlistAsset = true
         },
-        setChosenAsset(state, id) {
-            state.chosenAssetId = id
+
+        // functions to change the production order pages
+        changeToTemplatelist(state) {
+            state.onTemplatelist = true
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = false
         },
-        resetAssetStore(state) {
-            state.assetEditable = false
-            state.assetFiltered = false
-            state.assetSearchable = false
-            state.deleteAsset = false
-            state.chosenAssetId = -1
-            state.filteredAssetbyClient = ''
-            state.newAsset = false
-            state.newAssetName = ''
-            state.newCustomerID = ''
-            state.newCustomer = ''
-            state.newLocation = ''
-            state.newRemoteLocation = ''
-            state.newType = ''
-            state.newDescription = ''
-            state.newNotes = ''
-            state.newState = ''
-            state.newLastView = ''
-            state.newUser = ''
-            state.hardwareBool = false
-            state.newModel = ''
-            state.newSerialnumber = ''
-            state.newCPU = ''
-            state.newRAM = ''
-            state.newStorageConfiguration = ''
-            state.newMiscellaneous = ''
-            state.softwareBool = false
-            state.newSoftware = ''
-            state.newVersion = ''
-            state.newLicense = ''
+        changeToCustomerTemplatelist(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = true
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = false
         },
-        doDeleteAsset(state) {
-            state.deleteAsset = true
+        changeToTemplate(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = true
+            state.onInstancelist = false
+            state.onInstance = false
         },
-        undoDeleteAsset(state) {
-            state.deleteAsset = false
+        changeToInstancelist(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = true
+            state.onInstance = false
         },
-        updateAssetFilterbyClient(state, client) {
-            state.filteredAssetbyClient = client
-        },
-        toggleAssetSearchable(state) {
-            if (state.assetSearchable == false) {
-                state.assetSearchable = true
-                state.assetFiltered = false
-            } else {
-                state.assetSearchable = false
-            }
-            state.filteredAssetbyClient = ''
-        },
-        addNewAsset(state) {
-            state.newAsset = true
-            state.assetEditable = false
-            state.assetFiltered = false
-            state.assetSearchable = false
-            state.onAssetlist = false
-            state.onCustomerAssetlist = false
-            state.onAsset = true
-            state.onSolutionlistAsset = false
+        changeToInstance(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = true
         },
+
+        // functions to update the asset
         updateAssetComponent(state, asset) {
             state.newAssetName = asset.assetName
             state.newCustomerID = asset.customerId
@@ -161,7 +166,106 @@ const store = createStore({
             state.newSoftware = asset.software
             state.newVersion = asset.version
             state.newLicense = asset.license
-        }
+        },
+
+        // functions to update the production order template
+        updateProductionOrderTemplateComponent(state, pot) {
+            state.newNamePOT = pot.name
+            state.newCustomerIDPOT = pot.customerId
+            state.newCustomerPOT = pot.customer
+            state.newUserPOT = pot.user
+            state.newDescriptionPOT = pot.description
+            state.newNotesPOT = pot.notes
+        },
+
+        // function to set the chosen asset
+        setChosenAsset(state, id) {
+            state.chosenAssetId = id
+        },
+
+        // function to set the chosen production order template
+        setChosenPOT(state, id) {
+            state.chosenPOTId = id
+        },
+
+        // function to reset the pages
+        resetStore(state) {
+            state.editable = false
+            state.filtered = false
+            state.searchable = false
+            state.deleteBool = false
+            state.chosenAssetId = -1
+            state.filteredByClient = ''
+            state.new = false
+
+            // reset the asset page variables
+            state.newAssetName = ''
+            state.newCustomerID = ''
+            state.newCustomer = ''
+            state.newLocation = ''
+            state.newRemoteLocation = ''
+            state.newType = ''
+            state.newDescription = ''
+            state.newNotes = ''
+            state.newState = ''
+            state.newLastView = ''
+            state.newUser = ''
+            state.hardwareBool = false
+            state.newModel = ''
+            state.newSerialnumber = ''
+            state.newCPU = ''
+            state.newRAM = ''
+            state.newStorageConfiguration = ''
+            state.newMiscellaneous = ''
+            state.softwareBool = false
+            state.newSoftware = ''
+            state.newVersion = ''
+            state.newLicense = ''
+
+            // reset the production order template page variables
+            state.newNamePOT = ''
+            state.newCustomerIDPOT = ''
+            state.newCustomerPOT = ''
+            state.newUserPOT = false
+            state.newDescriptionPOT = ''
+            state.newNotesPOT = ''
+            state.newLastViewPOT = ''
+        },
+
+        // functions to (undo) delete an asset
+        doDelete(state) {
+            state.deleteBool = true
+        },
+        undoDelete(state) {
+            state.deleteBool = false
+        },
+
+        // function to update the asset filter
+        updateFilterbyClient(state, client) {
+            state.filteredByClient = client
+        },
+
+        // function to get to the add page
+        add(state) {
+            state.new = true
+            state.editable = false
+            state.filtered = false
+            state.searchable = false
+
+            // set the asset variables
+            state.onAssetlist = false
+            state.onCustomerAssetlist = false
+            state.onAsset = true
+            state.onSolutionlistAsset = false
+                        
+            // set the production order variables
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = true
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+
     },
 });
 
diff --git a/server/api/addPOT.ts b/server/api/addPOT.ts
new file mode 100644
index 0000000..0bb96f7
--- /dev/null
+++ b/server/api/addPOT.ts
@@ -0,0 +1,21 @@
+import { errorMsg } from "../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})
diff --git a/server/api/deleteProductionOrderTemplate/[id].ts b/server/api/deleteProductionOrderTemplate/[id].ts
new file mode 100644
index 0000000..58ac4d6
--- /dev/null
+++ b/server/api/deleteProductionOrderTemplate/[id].ts
@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})
diff --git a/server/api/getProductionOrderTemplate/[id].ts b/server/api/getProductionOrderTemplate/[id].ts
new file mode 100644
index 0000000..e682e3e
--- /dev/null
+++ b/server/api/getProductionOrderTemplate/[id].ts
@@ -0,0 +1,22 @@
+import { pot, errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return pot
+})
diff --git a/server/api/getSelectedPOTsByClient/[id].ts b/server/api/getSelectedPOTsByClient/[id].ts
new file mode 100644
index 0000000..e8b9960
--- /dev/null
+++ b/server/api/getSelectedPOTsByClient/[id].ts
@@ -0,0 +1,22 @@
+import { selectedPOTsByClient, errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOTsByClient
+})
diff --git a/server/api/getSelectedPOTsByPOT/[id].ts b/server/api/getSelectedPOTsByPOT/[id].ts
new file mode 100644
index 0000000..6269743
--- /dev/null
+++ b/server/api/getSelectedPOTsByPOT/[id].ts
@@ -0,0 +1,22 @@
+import { selectedPOTsByPOT, errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOTsByPOT
+})
diff --git a/server/api/updateProductionOrderTemplate.ts b/server/api/updateProductionOrderTemplate.ts
new file mode 100644
index 0000000..1b85fba
--- /dev/null
+++ b/server/api/updateProductionOrderTemplate.ts
@@ -0,0 +1,13 @@
+import { errorMsg } from "../middleware/productionOrderTemplates";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})
diff --git a/server/middleware/productionOrderTemplates.ts b/server/middleware/productionOrderTemplates.ts
index a4c0aca..86095da 100644
--- a/server/middleware/productionOrderTemplates.ts
+++ b/server/middleware/productionOrderTemplates.ts
@@ -3,24 +3,26 @@ import serversideConfig from '../../serversideConfig';
 import https from 'https';
 
 let productionOrderTemplates = [];
+let selectedPOTsByClient = [];
+let selectedPOTsByPOT = [];
+let pot = [];
 let errorMsg = '';
 
 export default defineEventHandler(async (event) => {
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+
+    const axiosInstance = axios.create({
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: "*",
+        },
+        httpsAgent: agent
+    });
 
     if (event.path.startsWith("/api/getAllProductionOrderTemplates")) {
 
-        const agent = new https.Agent({
-            rejectUnauthorized: false,
-        });
-
-        const axiosInstance = axios.create({
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: "*",
-            },
-            httpsAgent: agent
-        });
-
         // get all production order templates object from backend
         try {
             let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders`);
@@ -46,6 +48,190 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/addPOT")) {
+        const body = await readBody(event)
+        // add the config item in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getProductionOrderTemplate")) {
+        // get production order template object from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders/${itemId}`);
+            pot = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateProductionOrderTemplate")) {
+        const body = await readBody(event)
+        // update the production order template in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedPOTsByClient")) {
+        // get selected production order templates object by client from backend
+        let filteredClient = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredClient = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMasterProductionOrdersByCustomer/${filteredClient}`);
+            selectedPOTsByClient = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedPOTsByPOT")) {
+        // get selected production order templates object by pot from backend
+        let filteredPOT = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredPOT = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMasterProductionOrdersByChecklistname/${filteredPOT}`);
+            selectedPOTsByPOT = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteProductionOrderTemplate")) {
+        let potId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        potId = pathSegments[pathSegments.length - 1];
+
+        // delete the pot in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders/${potId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
 })
 
-export { productionOrderTemplates, errorMsg };
\ No newline at end of file
+export { productionOrderTemplates, selectedPOTsByClient, selectedPOTsByPOT, pot, errorMsg };
\ No newline at end of file