add config item

Reviewed-on: jo.kuehner/TueIT_App#16

es funktioniert jetzt wie folgt:
- vom entsprechenden component wird eine axios Anfrage an den api Server Endpunkt geschickt
- parallel greift die passende server middleware ein und diese macht den call ins backend
- daraufhin übermittelt die server middleware die Antwort an den api Endpunkt. Dieser schickt dann eine Antwort zurück an den Component, wo dann die Antwort dem client übermittelt wird

was ich schon alles gemacht habe:
- cors Fehler behoben mit entsprechender Konfig und headern
- login (noch nicht initial dorthin geroutet)
- signup aber nur hardgecoded mit einem Beispieluser, da ich einen brauchte fürs Login
- get all Funktionen für die Tabellen aller Seiten (customer existiert schon aber ist noch nicht in die customer Seite eingebunden)
- bin gerade bei CI. hier funktioniert schon ein einziges Item getten, updaten und löschen. Als nächstes mache ich noch die Erstellung eines neuen CI. Du kannst dich daran orientieren.

README.md

@@ -22,11 +22,11 @@ bun install
 
 ## Development Server
 
-Start the development server on `http://localhost:3000`:
+Start the development server on `https://localhost:3000`:
 
 ```bash
 # npm
-npm run dev
+npm run dev -- --host 0.0.0.0
 
 # pnpm
 pnpm run dev

app.vue

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

axios.config.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+//create axios instance
+const Axios = axios.create({
+  // baseURL: `https://${serversideConfig.url}:${serversideConfig.port}`,
+  headers: {
+    // 'Accept': 'application/json', 
+    'Content-Type': 'application/json',
+    //Authorization: `Bearer`,
+    Accept: "*",
+  },
+})
+
+export default Axios;

backend/controller/checklistSolutions.js

@@ -0,0 +1,79 @@
+//import functions from checklist solutions model
+import {
+    insertChecklistSolutionTodo,
+    getChecklistSolutionTodosById,
+    getChecklistSolutionTodosByAsset,
+    updateChecklistSolutionTodoById,
+    deleteAllChecklistSolutionTodosSolutionID,
+    deleteChecklistSolutionTodo,
+} from "../models/checklistSolutionsModel.js";
+
+//create new checklist solution todo
+export const createChecklistSolutionTodos = (req, res) => {
+    const data = req.body;
+    insertChecklistSolutionTodo(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single checklist solution todos by id
+export const showChecklistSolutionTodosById = (req, res) => {
+    getChecklistSolutionTodosById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single checklist solution todos by asset
+export const showChecklistSolutionTodosByAsset = (req, res) => {
+    getChecklistSolutionTodosByAsset(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update checklist solution todo
+export const updateChecklistSolutionTodo = (req, res) => {
+    const data = req.body;
+    updateChecklistSolutionTodoById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete checklist solution todos by solution ID
+export const deleteChecklistSolutionTodosSolutionID = (req, res) => {
+    const id = req.params.id;
+    deleteAllChecklistSolutionTodosSolutionID(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete checklist solution todos by primaryID
+export const deleteChecklistSolutionTodos = (req, res) => {
+    const id = req.params.id;
+    deleteChecklistSolutionTodo(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/configItems.js

@@ -0,0 +1,113 @@
+import {
+  getConfigItems,
+  getConfigItemById,
+  getConfigItemByName,
+  getConfigItemByCustomerId,
+  updateConfigItemById,
+  insertConfigItem,
+  getSelectedConfigItemsByCustomer,
+  getSelectedConfigItemsByAssetName,
+  deleteConfigItemById,
+} from "../models/configItemsModel.js";
+
+//get all configItems
+export const showConfigItems = (req, res) => {
+  getConfigItems((err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get single config item by id
+export const showConfigItemById = (req, res) => {
+  getConfigItemById(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get single config item by name
+export const showConfigItemByName = (req, res) => {
+  getConfigItemByName(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get config items by customer id
+export const showConfigItemByCustomerId = (req, res) => {
+  getConfigItemByCustomerId(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+// Update config item
+export const updateConfigItem = (req, res) => {
+  const data = req.body;
+  updateConfigItemById(data, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//create new config item
+export const createConfigItem = (req, res) => {
+  const data = req.body;
+  insertConfigItem(data, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get all selected config items by customer
+export const showSelectedConfigItemsByCustomer = (req, res) => {
+  getSelectedConfigItemsByCustomer(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get all selected config items by assetname
+export const showSelectedConfigItemsByAssetName = (req, res) => {
+  getSelectedConfigItemsByAssetName(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+// Delete config item
+export const deleteConfigItem = (req, res) => {
+  const id = req.params.id;
+  deleteConfigItemById(id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};

backend/controller/customers.js

@@ -0,0 +1,114 @@
+//import functions from customers model
+import {
+    getCustomers,
+    getSelectedCustomers,
+    getCustomerByProductionOrderId,
+    getCustomerByMaintenanceVisitId,
+    insertCustomer,
+    getCustomerByCustomerId,
+    getCustomerByName,
+    updateCustomerById,
+    deleteCustomerById,
+} from "../models/customerModel.js";
+
+//get all customers
+export const showCustomers = (req, res) => {
+    getCustomers((err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new customer
+export const createCustomer = (req, res) => {
+    const data = req.body;
+    insertCustomer(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected customers
+export const showSelectedCustomers = (req, res) => {
+    getSelectedCustomers(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single customer by production order id
+export const showCustomerByProductionOrderId = (req, res) => {
+    getCustomerByProductionOrderId(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single customer by maintenance visit id
+export const showCustomerByMaintenanceVisitId = (req, res) => {
+    getCustomerByMaintenanceVisitId(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single customer by customer id
+export const showCustomerByCustomerId = (req, res) => {
+    getCustomerByCustomerId(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single customer by name
+export const showCustomerByName = (req, res) => {
+    getCustomerByName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update customer
+export const updateCustomer = (req, res) => {
+    const data = req.body;
+    updateCustomerById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete customer
+export const deleteCustomer = (req, res) => {
+    const id = req.params.id;
+    deleteCustomerById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/issueSlips.js

@@ -0,0 +1,127 @@
+//import functions from issue slips model
+import {
+    getIssueSlips,
+    getSelectedIssueSlipsByTicketnumber,
+    getSelectedIssueSlipsByCustomer,
+    getSelectedIssueSlipsByDate,
+    deleteIssueSlipById,
+    deleteIssueSlipByTicketNo,
+    insertIssueSlip,
+    getIssueSlipByTicketNo,
+    getIssueSlipById,
+    updateIssueSlipById,
+} from "../models/issueSlipsModel.js";
+
+//get all issue slips
+export const showIssueSlips = (req, res) => {
+    getIssueSlips((err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected issue slips by customer
+export const showSelectedIssueSlipsByCustomer = (req, res) => {
+    getSelectedIssueSlipsByCustomer(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected issue slips by ticketnumber
+export const showSelectedIssueSlipsByTicketnumber = (req, res) => {
+    getSelectedIssueSlipsByTicketnumber(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected issue slips by date
+export const showSelectedIssueSlipsByDate = (req, res) => {
+    getSelectedIssueSlipsByDate(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete issue slip
+export const deleteIssueSlip = (req, res) => {
+    const id = req.params.id;
+    deleteIssueSlipById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete issue slips by ticketnumber
+export const deleteIssueSlipByTicketnumber = (req, res) => {
+    const id = req.params.id;
+    deleteIssueSlipByTicketNo(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new issue slip
+export const createIssueSlip = (req, res) => {
+    const data = req.body;
+    insertIssueSlip(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single issue slip by ticketNo
+export const showIssueSlipByTicketNo = (req, res) => {
+    getIssueSlipByTicketNo(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single issue slip by id
+export const showIssueSlipById = (req, res) => {
+    getIssueSlipById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update issue slip
+export const updateIssueSlip = (req, res) => {
+    const data = req.body;
+    updateIssueSlipById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/issueVariants.js

@@ -0,0 +1,103 @@
+//import functions from issue variants model
+import {
+    getAllIssueVariants,
+    getIssueVariantById,
+    getSelectedIssueVariantsByIssueId,
+    getSelectedIssueVariantsByName,
+    updateIssueVariantById,
+    deleteIssueVariantById,
+    deleteIssueVariantByIssueSlipId,
+    insertIssueVariant,
+} from "../models/issueVariantsModel.js";
+
+//get all issue variants
+export const showIssueVariants = (req, res) => {
+    getAllIssueVariants((err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete issue variant
+export const deleteIssueVariant = (req, res) => {
+    const id = req.params.id;
+    deleteIssueVariantById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete issue variant by issue slip id
+export const deleteIssueVariantByIssueSlipIds = (req, res) => {
+    const id = req.params.id;
+    deleteIssueVariantByIssueSlipId(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new issue variant
+export const createIssueVariant = (req, res) => {
+    const data = req.body;
+    insertIssueVariant(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single issue variant by id
+export const showIssueVariantById = (req, res) => {
+    getIssueVariantById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update issue variant
+export const updateIssueVariant = (req, res) => {
+    const data = req.body;
+    updateIssueVariantById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected issue variants by issueID
+export const showSelectedIssueVariantsByIssueId = (req, res) => {
+    getSelectedIssueVariantsByIssueId(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected issue variants by name
+export const showSelectedIssueVariantsByName = (req, res) => {
+    getSelectedIssueVariantsByName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/issues.js

@@ -0,0 +1,66 @@
+//import functions from issues model
+import {
+    getIssueById,
+    updateIssueById,
+    deleteIssueById,
+    insertIssue,
+    getAllIssues,
+} from "../models/issuesModel.js";
+
+//get all issues
+export const showIssues = (req, res) => {
+    getAllIssues((err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete issue
+export const deleteIssue = (req, res) => {
+    const id = req.params.id;
+    deleteIssueById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new issue
+export const createIssue = (req, res) => {
+    const data = req.body;
+    insertIssue(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single issue by id
+export const showIssueById = (req, res) => {
+    getIssueById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update issue
+export const updateIssue = (req, res) => {
+    const data = req.body;
+    updateIssueById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/maintenanceVisitTodos.js

@@ -0,0 +1,66 @@
+//import functions from maintenance visit todo model
+import {
+  insertMaintenanceVisitTodo,
+  getMaintenanceVisitTodosById,
+  getMaintenanceVisitTodosByAsset,
+  updateMaintenanceVisitTodoById,
+  deleteMaintenanceVisitTodosByPrimaryID,
+} from "../models/maintenanceVisitsTodosModel.js";
+
+//create new maintenance visit todo
+export const createMaintenanceVisitTodos = (req, res) => {
+  const data = req.body;
+  insertMaintenanceVisitTodo(data, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get single maintenance visit todos by id
+export const showMaintenanceVisitTodosById = (req, res) => {
+  getMaintenanceVisitTodosById(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get single maintenance visit todos by assetname
+export const showMaintenanceVisitTodosByAsset = (req, res) => {
+  getMaintenanceVisitTodosByAsset(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+// Update maintenance visit todo
+export const updateMaintenanceVisitTodo = (req, res) => {
+  const data = req.body;
+  updateMaintenanceVisitTodoById(data, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+// Delete maintenance visit
+export const deleteMaintenanceVisitTodos = (req, res) => {
+  const id = req.params.id;
+  deleteMaintenanceVisitTodosByPrimaryID(id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};

backend/controller/maintenanceVisits.js

@@ -0,0 +1,126 @@
+//import functions from maintenance visits model
+import {
+  getMaintenanceVisits,
+  getSelectedMaintenanceVisitsByChecklistname,
+  getSelectedMaintenanceVisitsByDate,
+  getSelectedMaintenanceVisitsByState,
+  getSelectedMaintenanceVisitsByCustomer,
+  deleteMaintenanceVisitById,
+  insertMaintenanceVisit,
+  getMaintenanceVisitByName,
+  getMaintenanceVisitById,
+  updateMaintenanceVisitStateById,
+} from "../models/maintenanceVisitsModel.js";
+
+//get all maintenance visits
+export const showMaintenanceVisits = (req, res) => {
+  getMaintenanceVisits((err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get all selected maintenance visits by checklistname
+export const showSelectedMaintenanceVisitsByChecklistname = (req, res) => {
+  getSelectedMaintenanceVisitsByChecklistname(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get all selected maintenance visits by customer
+export const showSelectedMaintenanceVisitsByCustomer = (req, res) => {
+  getSelectedMaintenanceVisitsByCustomer(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get all selected maintenance visits by state
+export const showSelectedMaintenanceVisitsByState = (req, res) => {
+  getSelectedMaintenanceVisitsByState(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get all selected maintenance visits by date
+export const showSelectedMaintenanceVisitsByDate = (req, res) => {
+  getSelectedMaintenanceVisitsByDate(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+// Delete maintenance visit
+export const deleteMaintenanceVisit = (req, res) => {
+  const id = req.params.id;
+  deleteMaintenanceVisitById(id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//create new maintenance visit
+export const createMaintenanceVisit = (req, res) => {
+  const data = req.body;
+  insertMaintenanceVisit(data, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get single maintenance visit by name
+export const showMaintenanceVisitByName = (req, res) => {
+  getMaintenanceVisitByName(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get single maintenance visit by id
+export const showMaintenanceVisitById = (req, res) => {
+  getMaintenanceVisitById(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+// Update maintenance visit
+export const updateMaintenanceVisitState = (req, res) => {
+  const data = req.body;
+  updateMaintenanceVisitStateById(data, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};

backend/controller/masterMaintenanceVisits.js

@@ -0,0 +1,89 @@
+import {
+    getMasterMaintenanceVisits,
+    getSelectedMasterMaintenanceVisitsByCustomer,
+    getSelectedMasterMaintenanceVisitsByChecklistname,
+    getMasterMaintenanceVisitById,
+    updateMasterMaintenanceVisitById,
+    insertMasterMaintenanceVisit,
+    deleteMasterMaintenanceVisitById,
+} from "../models/masterMaintenanceVisitsModel.js";
+
+//get all master maintenance visits
+export const showMasterMaintenanceVisits = (req, res) => {
+    getMasterMaintenanceVisits((err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected master maintenance visits by customer
+export const showSelectedMasterMaintenanceVisitsByCustomer = (req, res) => {
+    getSelectedMasterMaintenanceVisitsByCustomer(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected master maintenance visits by checklistname
+export const showSelectedMasterMaintenanceVisitsByChecklistname = (req, res) => {
+    getSelectedMasterMaintenanceVisitsByChecklistname(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single master maintenance visit
+export const showMasterMaintenanceVisitById = (req, res) => {
+    getMasterMaintenanceVisitById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update master maintenance visit
+export const updateMasterMaintenanceVisit = (req, res) => {
+    const data = req.body;
+    updateMasterMaintenanceVisitById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new master maintenance visit
+export const createMasterMaintenanceVisit = (req, res) => {
+    const data = req.body;
+    insertMasterMaintenanceVisit(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete master maintenance visit
+export const deleteMasterMaintenanceVisit = (req, res) => {
+    const id = req.params.id;
+    deleteMasterMaintenanceVisitById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/masterMaintenanceVisitsTodos.js

@@ -0,0 +1,79 @@
+import {
+    getMasterMaintenanceVisitTodoById,
+    updateMasterMaintenanceVisitTodoById,
+    deleteMasterMaintenanceVisitTodoById,
+    deleteMasterMaintenanceVisitTodoByTemplateId,
+    updateMasterMaintenanceVisitTodos,
+    insertMasterMaintenanceVisitTodo,
+} from "../models/masterMaintenanceTodosModel.js";
+
+//get single master maintenance visit todos
+export const showMasterMaintenanceVisitTodoById = (req, res) => {
+    getMasterMaintenanceVisitTodoById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update master maintenance visit todos
+export const updateMasterMaintenanceVisitTodo = (req, res) => {
+    const data = req.body;
+    updateMasterMaintenanceVisitTodoById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete master maintenance visit todo
+export const deleteMasterMaintenanceVisitTodo = (req, res) => {
+    const id = req.params.id;
+    deleteMasterMaintenanceVisitTodoById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete master checklist maintenance visit by checklistID
+export const deleteMasterMaintenanceVisitTodoByTemplateIds = (req, res) => {
+    const id = req.params.id;
+    deleteMasterMaintenanceVisitTodoByTemplateId(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update all master maintenance visit todos
+export const updateAllMasterMaintenanceVisitTodos = (req, res) => {
+    const data = req.body;
+    updateMasterMaintenanceVisitTodos(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new master maintenance visit todo
+export const createMasterMaintenanceVisitTodo = (req, res) => {
+    const data = req.body;
+    insertMasterMaintenanceVisitTodo(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/masterProductionOrderTodos.js

@@ -0,0 +1,79 @@
+import {
+    getMasterProductionOrderTodoById,
+    updateMasterProductionOrderTodoById,
+    deleteMasterProductionOrderTodoById,
+    deleteMasterProductionOrderTodoByTemplateId,
+    updateMasterProductionOrderTodos,
+    insertMasterProductionOrderTodo,
+} from "../models/masterProductionOrderTodosModel.js";
+
+//get single master production order todos
+export const showMasterProductionOrderTodoById = (req, res) => {
+    getMasterProductionOrderTodoById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update master production order todos
+export const updateMasterProductionOrderTodo = (req, res) => {
+    const data = req.body;
+    updateMasterProductionOrderTodoById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete master production order todo
+export const deleteMasterProductionOrderTodo = (req, res) => {
+    const id = req.params.id;
+    deleteMasterProductionOrderTodoById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete master production order by checklistID
+export const deleteMasterProductionOrderTodoByTemplateIds = (req, res) => {
+    const id = req.params.id;
+    deleteMasterProductionOrderTodoByTemplateId(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update all master production order todos
+export const updateAllProductionOrderTodos = (req, res) => {
+    const data = req.body;
+    updateMasterProductionOrderTodos(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new master production order todo
+export const createMasterProductionOrderTodo = (req, res) => {
+    const data = req.body;
+    insertMasterProductionOrderTodo(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/masterProductionOrders.js

@@ -0,0 +1,89 @@
+import {
+    getMasterProductionOrders,
+    getSelectedMasterProductionOrdersByCustomer,
+    getSelectedMasterProductionOrdersByChecklistname,
+    getMasterProductionOrderById,
+    updateMasterProductionOrderById,
+    insertMasterProductionOrder,
+    deleteMasterProductionOrderById,
+} from "../models/masterProductionOrdersModel.js";
+
+//get all master production orders
+export const showMasterProductionOrders = (req, res) => {
+    getMasterProductionOrders((err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected master production orders by customer
+export const showSelectedMasterProductionOrdersByCustomer = (req, res) => {
+    getSelectedMasterProductionOrdersByCustomer(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected master production orders by checklistname
+export const showSelectedMasterProductionOrdersByChecklistname = (req, res) => {
+    getSelectedMasterProductionOrdersByChecklistname(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single master production order
+export const showMasterProductionOrderById = (req, res) => {
+    getMasterProductionOrderById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update master production order
+export const updateMasterProductionOrder = (req, res) => {
+    const data = req.body;
+    updateMasterProductionOrderById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new master production order
+export const createMasterProductionOrder = (req, res) => {
+    const data = req.body;
+    insertMasterProductionOrder(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete master production order
+export const deleteMasterProductionOrder = (req, res) => {
+    const id = req.params.id;
+    deleteMasterProductionOrderById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/orderingInfoIssueSlips.js

@@ -0,0 +1,66 @@
+import {
+    getOrderingInfoIssueSlipById,
+    updateOrderingInfoIssueSlipById,
+    deleteOrderingInfoIssueSlipById,
+    deleteOrderingInfoIssueSlipByIssueSlipId,
+    insertOrderingInfoIssueSlip,
+} from "../models/orderingInfoIssueSlipsModel.js";
+
+//get single ordering info issue slip
+export const showOrderingInfoIssueSlipById = (req, res) => {
+    getOrderingInfoIssueSlipById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete ordering info issue slip
+export const deleteOrderingInfoIssueSlip = (req, res) => {
+    const id = req.params.id;
+    deleteOrderingInfoIssueSlipById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete ordering info issue slip by issueslip ID
+export const deleteOrderingInfoIssueSlipByIssueSlipIds = (req, res) => {
+    const id = req.params.id;
+    deleteOrderingInfoIssueSlipByIssueSlipId(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update ordering info issue slip
+export const updateOrderingInfoIssueSlip = (req, res) => {
+    const data = req.body;
+    updateOrderingInfoIssueSlipById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new ordering info issue slip
+export const createOrderingInfoIssueSlip = (req, res) => {
+    const data = req.body;
+    insertOrderingInfoIssueSlip(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/productionOrderTodos.js

@@ -0,0 +1,66 @@
+//import functions from production order todo model
+import {
+    insertProductionOrderTodo,
+    getProductionOrderTodosById,
+    getProductionOrderTodosByAsset,
+    updateProductionOrderTodoById,
+    deleteProductionOrderTodosChecklistID,
+} from "../models/productionOrdersTodosModel.js";
+
+//create new production order todo
+export const createProductionOrderTodos = (req, res) => {
+    const data = req.body;
+    insertProductionOrderTodo(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single production order todos by id
+export const showProductionOrderTodosById = (req, res) => {
+    getProductionOrderTodosById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single production order todos by asset
+export const showProductionOrderTodosByAsset = (req, res) => {
+    getProductionOrderTodosByAsset(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update production order todo
+export const updateProductionOrderTodo = (req, res) => {
+    const data = req.body;
+    updateProductionOrderTodoById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete production order todos
+export const deleteProductionOrderTodos = (req, res) => {
+    const id = req.params.id;
+    deleteProductionOrderTodosChecklistID(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/productionOrders.js

@@ -0,0 +1,138 @@
+//import functions from production orders model
+import {
+    getProductionOrders,
+    getSelectedProductionOrdersByChecklistname,
+    getSelectedProductionOrdersByDate,
+    getSelectedProductionOrdersByState,
+    getSelectedProductionOrdersByCustomer,
+    getSelectedProductionOrdersByTicketnumber,
+    insertProductionOrder,
+    getProductionOrderByName,
+    deleteProductionOrderById,
+    getProductionOrderById,
+    updateProductionOrderStateById,
+} from "../models/productionOrdersModel.js";
+
+//get all production orders
+export const showProductionOrders = (req, res) => {
+    getProductionOrders((err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected production orders by checklistname
+export const showSelectedProductionOrdersByChecklistname = (req, res) => {
+    getSelectedProductionOrdersByChecklistname(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected production orders by customer
+export const showSelectedProductionOrdersByCustomer = (req, res) => {
+    getSelectedProductionOrdersByCustomer(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected production orders by ticketnumber
+export const showSelectedProductionOrdersByTicketnumber = (req, res) => {
+    getSelectedProductionOrdersByTicketnumber(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected production orders by date
+export const showSelectedProductionOrdersByDate = (req, res) => {
+    getSelectedProductionOrdersByDate(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected production orders by state
+export const showSelectedProductionOrdersByState = (req, res) => {
+    getSelectedProductionOrdersByState(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete production order
+export const deleteProductionOrder = (req, res) => {
+    const id = req.params.id;
+    deleteProductionOrderById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new production order
+export const createProductionOrder = (req, res) => {
+    const data = req.body;
+    insertProductionOrder(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single production order by name
+export const showProductionOrderByName = (req, res) => {
+    getProductionOrderByName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single production order by id
+export const showProductionOrderById = (req, res) => {
+    getProductionOrderById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update production order
+export const updateProductionOrderState = (req, res) => {
+    const data = req.body;
+    updateProductionOrderStateById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/solutions.js

@@ -0,0 +1,128 @@
+//import functions from solutions model
+import {
+    getSolutions,
+    getSolutionById,
+    getSolutionByName,
+    updateSolutionById,
+    deleteSolutionById,
+    insertSolution,
+    getSelectedSolutionsByCustomer,
+    getSelectedSolutionsBySolutionName,
+    getSelectedSolutionsByAssetName,
+    getSelectedSolutionsByType,
+} from "../models/solutionsModel.js";
+
+//get all solutions
+export const showSolutions = (req, res) => {
+    getSolutions((err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected solutions by customer
+export const showSelectedSolutionByCustomer = (req, res) => {
+    getSelectedSolutionsByCustomer(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected solutions by solution name
+export const showSelectedSolutionBySolutionName = (req, res) => {
+    getSelectedSolutionsBySolutionName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected solutions by asset name
+export const showSelectedSolutionByAssetName = (req, res) => {
+    getSelectedSolutionsByAssetName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected solutions by type
+export const showSelectedSolutionByType = (req, res) => {
+    getSelectedSolutionsByType(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+
+//create new solution
+export const createSolution = (req, res) => {
+    const data = req.body;
+    insertSolution(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single customer by primaryID
+export const showSolutionById = (req, res) => {
+    getSolutionById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single customer by name
+export const showSolutionByName = (req, res) => {
+    getSolutionByName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+
+// Update solution
+export const updateSolution = (req, res) => {
+    const data = req.body;
+    updateSolutionById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete solution
+export const deleteSolution = (req, res) => {
+    const id = req.params.id;
+    deleteSolutionById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/users.js

@@ -0,0 +1,178 @@
+//import mariadb
+import ownConn from "../dbConfig.js";
+
+import bcrypt from "bcryptjs";
+import jwt from "jsonwebtoken";
+import { v4 as uuidv4 } from 'uuid';
+
+import {
+    getUsers,
+    getUserById,
+    updateUserById,
+    deleteUserById,
+} from "../models/usersModel.js";
+
+//insert user to databased
+export const signUp = async (req, res, next) => {
+    try {
+        let sql = `SELECT id FROM users WHERE LOWER(username) = LOWER(?)`;
+        const result = await ownConn.execute(sql, [req.body.username])
+
+        if (result.length > 0) { //username already exists
+            return res.status(409).send({
+                message: 'This username is already in use!'
+            });
+        } else { // username not in use
+            bcrypt.hash(req.body.password, 10, (err, hash) => {
+                if (err) {
+                    throw err;
+                    return res.status(500).send({
+                        message: err,
+                    });
+                } else {
+                    const currentTime = new Date();
+                    const options = {
+                        timeZone: 'Europe/Berlin',
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    };
+                    const dateTimeString = currentTime.toLocaleString('de-DE', options);
+                    const results = ownConn.query(`INSERT INTO users(id, username, password, registered, fullName, email, phonenumber, address, city, postcode, adminBool, technician1Bool, technician2Bool, technicianMonitoringBool, merchantBool, internBool) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+                        [
+                            uuidv4(),
+                            req.body.username,
+                            hash,
+                            dateTimeString,
+                            req.body.fullName,
+                            req.body.email,
+                            req.body.phonenumber,
+                            req.body.address,
+                            req.body.city,
+                            req.body.postcode,
+                            req.body.adminBool,
+                            req.body.technician1Bool,
+                            req.body.technician2Bool,
+                            req.body.technicianMonitoringBool,
+                            req.body.merchantBool,
+                            req.body.internBool,
+                        ]);
+                    return res.status(201).send({
+                        message: "Registered!",
+                    })
+                }
+            })
+        }
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+export const login = async (req, res, next) => {
+    try {
+        let sql = `SELECT * FROM users WHERE username = ?`;
+        const result = await ownConn.execute(sql, [req.body.username]);
+        if (!result.length) {
+            return res.status(400).send({
+                message: 'Username or password incorrect!',
+            });
+        }
+        bcrypt.compare(
+            req.body.password,
+            result[0]['password'],
+            async (bErr, bResult) => {
+                if (bErr) {
+                    return res.status(400).send({
+                        message: 'Username or password incorrect!',
+                    });
+                }
+                if (bResult) {
+                    // password match
+                    const token = jwt.sign(
+                        {
+                            username: result[0].username,
+                            userId: result[0].id,
+                        },
+                        'SECRETTUEITKEY',
+                        { expiresIn: '7d' }
+                    );
+                    let sql1 = `UPDATE users SET lastLogin = ? WHERE id = ?`;
+                    const currentTime = new Date();
+                    const options = {
+                        timeZone: 'Europe/Berlin',
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    };
+                    const dateTimeString = currentTime.toLocaleString('de-DE', options);
+                    const results = await ownConn.query(sql1, [dateTimeString, result[0].id]);
+                    return res.status(200).send({
+                        message: 'Logged in!',
+                        token,
+                        user: result[0],
+                    });
+                }
+                return res.status(400).send({
+                    message: 'Username or password incorrect!',
+                });
+            }
+        );
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+    }
+};
+
+//get all users
+export const showUsers = (req, res) => {
+    getUsers((err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single user by id
+export const showUserById = (req, res) => {
+    getUserById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update user
+export const updateUser = (req, res) => {
+    const data = req.body;
+    updateUserById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete user
+export const deleteUser = (req, res) => {
+    const id = req.params.id;
+    deleteUserById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/dbConfig.js

@@ -0,0 +1,12 @@
+//import mariadb
+import mariadb from "mariadb";
+
+const ownConn = await mariadb.createConnection({
+    host: '127.0.0.1',
+    port: 3306,
+    user: 'tueitapp',
+    password: 'R}nt.>V~zyU!4SY$kE-p',
+    database: 'tueitapp',
+});
+
+export default ownConn;

backend/index.js

@@ -0,0 +1,56 @@
+import serversideConfig from '../serversideConfig.js';
+
+//import express
+import express from "express";
+
+//import cors
+import cors from "cors";
+
+//import https
+import https from "https";
+
+//import fs
+import fs from "fs";
+
+//import routes
+import Router from "./routes/routes.js";
+
+import clientsideConfig from '../clientsideConfig.js';
+
+//init express
+const app = express();
+
+//setup cors
+const corsOptions = {
+  origin: `https://${clientsideConfig.url}:${clientsideConfig.port}`,
+  headers: 'authorization, content-type',
+  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
+  credentials: true,
+  optionsSuccessStatus: 204,
+};
+
+//use cors
+app.use(cors(corsOptions));
+
+//use express json
+app.use(express.json());
+
+//use router
+app.use(Router);
+
+//setup https
+var privateKey = fs.readFileSync('../certs/privkey.pem');
+var certificate = fs.readFileSync('../certs/fullchain.pem');
+
+var server = https.createServer({
+  key: privateKey,
+  cert: certificate,
+}, app);
+
+// const PORT = process.env.PORT || 4172;
+const PORT = process.env.PORT || serversideConfig.port;
+
+//PORT
+server.listen(PORT, () => {
+  console.log(`Server running successfully (port ${PORT})`);
+});

backend/middleware/users.js

@@ -0,0 +1,93 @@
+import jwt from "jsonwebtoken";
+
+export const validateRegister = (req, res, next) => {
+    // full name empty
+    if (!req.body.fullName) {
+        return res.status(400).send({
+            message: 'Please enter a full name',
+        });
+    }
+    // rather an email nor a phonenumber
+    if (!req.body.email && !req.body.phonenumber) {
+        return res.status(400).send({
+            message: 'Please enter an email or a phonenumber',
+        });
+    }
+    // validate email
+    if (req.body.email && !(validateEMail(req.body.email))) {
+        return res.status(400).send({
+            message: 'Please choose a valid email',
+        });
+    }
+    // validate phonenumber
+    if (req.body.phonenumber && !(validatePhonenumber(req.body.phonenumber))) {
+        return res.status(400).send({
+            message: 'Please choose a valid phonenumber',
+        });
+    }
+    // username min length 5
+    if (!req.body.username || req.body.username.length < 5) {
+        return res.status(400).send({
+            message: 'Please enter an username with min. 5 chars',
+        });
+    }
+    // password min 8 chars
+    if (!req.body.password || req.body.password.length < 8) {
+        return res.status(400).send({
+            message: 'Please enter a password with min. 8 chars',
+        });
+    }
+    // password (repeat) must match
+    if (
+        !req.body.password_repeat ||
+        req.body.password != req.body.password_repeat
+    ) {
+        return res.status(400).send({
+            message: 'Both passwords must match',
+        });
+    }
+    next();
+};
+
+export const isLoggedIn = (req, res, next) => {
+    if (!req.headers.authorization) {
+        return res.status(400).send({
+            message: 'Your session is not valid!',
+        });
+    }
+    try {
+        const authHeader = req.headers.authorization;
+        const token = authHeader.split(' ')[1];
+        const decoded = jwt.verify(token, 'SECRETTUEITKEY');
+        req.userData = decoded;
+        next();
+    } catch (err) {
+        return res.status(400).send({
+            message: 'Authority to access this resource missing',
+        });
+    }
+}
+
+// to validate the email
+function validateEMail(email) {
+    const emailRegex = /^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/;
+    if (email === "") {
+        return true;
+    }
+    return emailRegex.test(email);
+};
+
+// to validate the phonenumber
+function validatePhonenumber(number) {
+    const mobilephonenumberRegex = new RegExp(/^(((((00|\+){1,2})49([ \-/]?|[ \()/]?))|0)[1]([0-2]|[4-7])([0-9]{1})([ \-/]?|[ \()/]?)([0-9]{8}))$/, "gm");
+    const landlineRegex = new RegExp(/^0(30|40|69|89|20[12389]|21[24]|228|234|335|340|3[3-9][15]|906|[2-9][1-9]1|3(?:3(?:[0237][127]|0[3-6]|2[89]|3[458]|[46][1246]|7[589]|8[1256]|9[145])|4(?:[2347][135]|[34]7|[69][146]|48|62|76|93)|5(?:[04679][14]|[238][135]|[2469]2|[4789]6|[278]8|63|73|37|29)|6(?:[024689][13]|[03789]5|06|2[2489]|3[1246]|44|47|7[1279]|82|86)|7(?:[236][135]|2[2467]|37|4[145]|62|64|7[1-4])|8(?:[234678]1|3[468]|4[347]|6[035-9]|7[467]|83|86)|9(?:[236][135]|[04689]4|[04789]1|[03468]7|02|09|28|4[369]|6[2689]|73|76|96|98))|3[3-9][0-9]{3}|13[078]|180[235]|18[01]|19[0-9]{3}|[789]00|[2-9][0-9]{3})([0-9]{1,})$/, "gm");
+    if (number === "") {
+        return true
+    }
+    if (mobilephonenumberRegex.test(number)) {
+        return true
+    } else if (landlineRegex.test(number)) {
+        return true;
+    }
+    return false;
+};

backend/models/checklistSolutionsModel.js

@@ -0,0 +1,85 @@
+import ownConn from "../dbConfig.js";
+
+//insert checklist solution todo to databased
+export const insertChecklistSolutionTodo = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO checklistsolutions(solutionID, step, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.solutionID, data.step, data.asset, data.task, data.comments]);
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single checklist solution todo by id
+export const getChecklistSolutionTodosById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM checklistsolutions WHERE solutionID = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single checklist solution todo by asset
+export const getChecklistSolutionTodosByAsset = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM checklistsolutions WHERE asset = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update checklist solution todo to Database
+export const updateChecklistSolutionTodoById = async (data, result) => {
+    try {
+        const id = data.primaryID;
+        let sql = `UPDATE checklistsolutions SET step = ?, asset = ?, task = ?, comments = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comments, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete all checklist solution todos by template ID to Database
+export const deleteAllChecklistSolutionTodosSolutionID = async (id, result) => {
+    try {
+        let sql = `DELETE FROM checklistsolutions WHERE solutionID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete single checklist solution todo by primary ID to Database
+export const deleteChecklistSolutionTodo = async (id, result) => {
+    try {
+        let sql = `DELETE FROM checklistsolutions WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/configItemsModel.js

@@ -0,0 +1,130 @@
+import ownConn from "../dbConfig.js";
+
+//get all master checklists
+export const getConfigItems = async (result) => {
+  try {
+    let sql = `SELECT * FROM changedb ORDER BY assetName ASC`;
+    const results = await ownConn.query(sql)
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get single config item by id
+export const getConfigItemById = async (id, result) => {
+  try {
+    let sql = `SELECT * FROM changedb WHERE primaryID = ?`;
+    const results = await ownConn.execute(sql, [id])
+    result(null, results[0]);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get single config item by name
+export const getConfigItemByName = async (name, result) => {
+  try {
+    let sql = `SELECT * FROM changedb WHERE assetName = ?`;
+    const results = await ownConn.query(sql, [name])
+    result(null, results[0]);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get config items by customer id
+export const getConfigItemByCustomerId = async (customerId, result) => {
+  try {
+    let sql = `SELECT * FROM changedb WHERE customerID = ? ORDER BY assetName ASC`;
+    const results = await ownConn.query(sql, [customerId])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+// Update customer to Database
+export const updateConfigItemById = async (data, result) => {
+  const id = data.primaryID;
+  try {
+    let sql = `UPDATE changedb SET assetName = ?, customerID = ?, customer = ?, location = ?, remoteLocation = ?, type = ?, description = ?, notes = ?, state = ?, lastView = ?, user = ?, hardwareBool = ?, model = ?, serialnumber = ?, CPU = ?, RAM = ?, storageConfiguration = ?, miscellaneous = ?, softwareBool = ?, software = ?, version = ?, license = ?, networkBool = ?, IPv4 = ?, IPv6 = ?, MAC = ?, subnetmask = ? WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [data.assetName, data.customerID, data.customer, data.location, data.remoteLocation, data.type, data.description, data.notes, data.state, data.lastView, data.user, data.hardwareBool, data.model, data.serialnumber, data.CPU, data.RAM, data.storageConfiguration, data.miscellaneous, data.softwareBool, data.software, data.version, data.license, data.networkBool, data.IPv4, data.IPv6, data.MAC, data.subnetmask, id]);
+    results.insertId = results.insertId.toString();
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//insert config item to databased
+export const insertConfigItem = async (data, result) => {
+  try {
+    const results = await ownConn.query(`INSERT INTO changedb(assetName, customerID, customer, location, remoteLocation, type, description, notes, state, lastView, user, hardwareBool, model, serialnumber, CPU, RAM, storageConfiguration, miscellaneous, softwareBool, software, version, license, networkBool, IPv4, IPv6, MAC, subnetmask) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.assetName, data.customerID, data.customer, data.location, data.remoteLocation, data.type, data.description, data.notes, data.state, data.lastView, data.user, data.hardwareBool, data.model, data.serialnumber, data.CPU, data.RAM, data.storageConfiguration, data.miscellaneous, data.softwareBool, data.software, data.version, data.license, data.networkBool, data.IPv4, data.IPv6, data.MAC, data.subnetmask])
+    results.insertId = results.insertId.toString();
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//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`;
+    const results = await ownConn.execute(sql)
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//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`;
+    const results = await ownConn.execute(sql)
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+// Delete config item to Database
+export const deleteConfigItemById = async (id, result) => {
+  try {
+    let sql = `DELETE FROM changedb WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};

backend/models/customerModel.js

@@ -0,0 +1,132 @@
+import ownConn from "../dbConfig.js";
+
+//get all customers
+export const getCustomers = async (result) => {
+    try {
+        let sql = `SELECT * FROM customers ORDER BY customername ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected customers
+export const getSelectedCustomers = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM customers WHERE customername LIKE '%${selected}%' ORDER BY customername ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single customer by production order id
+export const getCustomerByProductionOrderId = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM productionOrders WHERE ticketNumber = ?`;
+        const results = await ownConn.execute(sql, [id])
+        let sql1 = `SELECT * FROM customers  WHERE customerID LIKE '%${results[0].customerID}%'`;
+        const results1 = await ownConn.execute(sql1)
+        result(null, results1[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single customer by maintenance visit id
+export const getCustomerByMaintenanceVisitId = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM maintenanceVisits WHERE primaryID = ?`;
+        const results = await ownConn.execute(sql, [id])
+        let sql1 = `SELECT * FROM customers  WHERE customerID LIKE '%${results[0].customerID}%'`;
+        const results1 = await ownConn.execute(sql1)
+        result(null, results1[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert customer to databased
+export const insertCustomer = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO customers(customername, contactperson, EMail, phonenumber, address, postcode, city, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?)`, [data.customername, data.contactperson, data.EMail, data.phonenumber, data.address, data.postcode, data.city, data.notes])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single customer by name
+export const getCustomerByCustomerId = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM customers  WHERE customerID = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single customer by name
+export const getCustomerByName = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM customers  WHERE customername = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update customer to Database
+export const updateCustomerById = async (data, result) => {
+    const id = data.customerID;
+    try {
+        let sql = `UPDATE customers SET customername = ?, contactperson = ?, EMail = ?, phonenumber = ?, address = ?,  postcode = ?, city = ?, notes = ? WHERE customerID = ?`;
+        const results = await ownConn.query(sql, [data.customername, data.contactperson, data.EMail, data.phonenumber, data.address, data.postcode, data.city, data.notes, id]);
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+
+// Delete customer to Database
+export const deleteCustomerById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM customers WHERE customerID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/issueSlipsModel.js

@@ -0,0 +1,141 @@
+import ownConn from "../dbConfig.js";
+
+//get all issue slips
+export const getIssueSlips = async (result) => {
+    try {
+        let sql = `SELECT * FROM issueslips ORDER BY customer ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected issue slips by ticketnumber
+export const getSelectedIssueSlipsByTicketnumber = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM issueslips WHERE ticketNo LIKE '%${selected}%' ORDER BY ticketNo ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected issue slips by date of creation
+export const getSelectedIssueSlipsByDate = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM issueslips WHERE creationDate LIKE '%${selected}%' ORDER BY creationDate ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete issue slip to Database
+export const deleteIssueSlipById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM issueslips WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete issue slip by ticketnumber to Database
+export const deleteIssueSlipByTicketNo = async (id, result) => {
+    try {
+        let sql = `DELETE FROM issueslips WHERE ticketNo = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert issue slip to database
+export const insertIssueSlip = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO issueslips(customerID, customer, ticketNo, creationDate, lastView, user, notes, supplierRequest, supplierOffer, clientOffer, clientOrder, supplierOrder, ingress, egress, ingressBill, egressBill) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.customerID, data.customer, data.ticketNo, data.creationDate, data.lastView, data.user, data.notes, data.supplierRequest, data.supplierOffer, data.clientOffer, data.clientOrder, data.supplierOrder, data.ingress, data.egress, data.ingressBill, data.egressBill])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single issue slip by ticketNo
+export const getIssueSlipByTicketNo = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM issueslips WHERE ticketNo = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single issue slip by id
+export const getIssueSlipById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM issueslips WHERE primaryID = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update issue slip state to Database
+export const updateIssueSlipById = async (data, result) => {
+    const id = data.primaryID;
+    try {
+        let sql = `UPDATE issueslips SET customerID = ?, customer = ?, ticketNo = ?, creationDate = ?, lastView = ?, user = ?, notes = ?, supplierRequest = ?, supplierOffer = ?, clientOffer = ?, clientOrder = ?, supplierOrder = ?, ingress = ?, egress = ?, ingressBill = ?, egressBill = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.customerID, data.customer, data.ticketNo, data.creationDate, data.lastView, data.user, data.notes, data.supplierRequest, data.supplierOffer, data.clientOffer, data.clientOrder, data.supplierOrder, data.ingress, data.egress, data.ingressBill, data.egressBill, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/issueVariantsModel.js

@@ -0,0 +1,114 @@
+import ownConn from "../dbConfig.js";
+
+//get all issue variants
+export const getAllIssueVariants = async (result) => {
+    try {
+        let sql = `SELECT * FROM issuevariants ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get issue variant
+export const getIssueVariantById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM issuevariants WHERE primaryID = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected issue variants by issueID
+export const getSelectedIssueVariantsByIssueId = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM issuevariants WHERE issueID LIKE '%${selected}%' ORDER BY issueID ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update issue variant
+export const updateIssueVariantById = async (data, result) => {
+    try {
+        const id = data.primaryID;
+        let sql = `UPDATE issuevariants SET issueID = ?, name = ? , properties = ?, state = ?, amount = ?, price = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.issueID, data.name, data.properties, data.state, data.amount, data.price, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+
+// Delete issue variant to Database
+export const deleteIssueVariantById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM issuevariants WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete issue variants by issueID to Database
+export const deleteIssueVariantByIssueSlipId = async (id, result) => {
+    try {
+        let sql = `DELETE FROM issuevariants WHERE issueID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert issue to databased
+export const insertIssueVariant = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO issuevariants(issueID, name, properties, state, amount, price) VALUES(?, ?, ?, ?, ?, ?)`, [data.issueID, data.name, data.properties, data.state, data.amount, data.price])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/issuesModel.js

@@ -0,0 +1,71 @@
+import ownConn from "../dbConfig.js";
+
+//get all issues
+export const getAllIssues = async (result) => {
+    try {
+        let sql = `SELECT * FROM issues ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single issue 
+export const getIssueById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM issues WHERE primaryID = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update issue to Database
+export const updateIssueById = async (data, result) => {
+    try {
+        const id = data.primaryID;
+        let sql = `UPDATE issues SET name = ?, type = ? , state = ?, amount = ?, properties = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.name, data.type, data.state, data.amount, data.properties, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete issue to Database
+export const deleteIssueById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM issues WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert issue to databased
+export const insertIssue = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO issues(name, type, state, amount, properties) VALUES(?, ?, ?, ?, ?)`, [data.name, data.type, data.state, data.amount, data.properties])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/maintenanceVisitsModel.js

@@ -0,0 +1,141 @@
+import ownConn from "../dbConfig.js";
+
+//get all maintenance visits
+export const getMaintenanceVisits = async (result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisits ORDER BY name ASC`;
+    const results = await ownConn.execute(sql)
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//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`;
+    const results = await ownConn.execute(sql)
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//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`;
+    const results = await ownConn.execute(sql)
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get all selected maintenance visits by date
+export const getSelectedMaintenanceVisitsByDate = async (selected, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisits WHERE creationDate LIKE '%${selected}%' ORDER BY creationDate ASC`;
+    const results = await ownConn.execute(sql);
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//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`;
+    const results = await ownConn.execute(sql)
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+// Delete maintenance visit to Database
+export const deleteMaintenanceVisitById = async (id, result) => {
+  try {
+    let sql = `DELETE FROM maintenancevisits WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [id])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//insert maintenance visit to databased
+export const insertMaintenanceVisit = async (data, result) => {
+  try {
+    const results = await ownConn.query(`INSERT INTO maintenancevisits(name, templateID, maintenanceType, state, creationDate, completionDate, user, customer, customerID, templateNotes, type, timeSpent, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.name, data.templateID, data.maintenanceType, data.state, data.creationDate, data.completionDate, data.user, data.customer, data.customerID, data.templateNotes, data.type, data.timeSpent, data.notes])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get single maintenance visit by name
+export const getMaintenanceVisitByName = async (id, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisits  WHERE name = ?`;
+    const results = await ownConn.execute(sql, [id])
+    result(null, results[0]);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get single maintenance visit by id
+export const getMaintenanceVisitById = async (id, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisits  WHERE primaryID = ?`;
+    const results = await ownConn.execute(sql, [id])
+    result(null, results[0]);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+// Update maintenance visit state to Database
+export const updateMaintenanceVisitStateById = async (data, result) => {
+  try {
+    const id = data.primaryID;
+    let sql = `UPDATE maintenancevisits SET state = ? WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [data.state, id])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};

backend/models/maintenanceVisitsTodosModel.js

@@ -0,0 +1,71 @@
+import ownConn from "../dbConfig.js";
+
+//insert maintenance visit todo to databased
+export const insertMaintenanceVisitTodo = async (data, result) => {
+  try {
+    const results = await ownConn.query(`INSERT INTO maintenancevisittodos(templateID, step, asset, task, comment, done) VALUES(?, ?, ?, ?, ?, ?)`, [data.templateID, data.step, data.asset, data.task, data.comment, data.done])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get single maintenance visit todo by id
+export const getMaintenanceVisitTodosById = async (id, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisittodos WHERE templateID = ? ORDER BY primaryID ASC`;
+    const results = await ownConn.execute(sql, [id])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get single maintenance visit todo by asset
+export const getMaintenanceVisitTodosByAsset = async (id, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisittodos WHERE asset = ? ORDER BY primaryID ASC`;
+    const results = await ownConn.execute(sql, [id])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+// Update maintenance visit todo to Database
+export const updateMaintenanceVisitTodoById = async (data, result) => {
+  try {
+    const id = data.primaryID;
+    let sql = `UPDATE maintenancevisittodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, id])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+// Delete maintenance visit todo to Database
+export const deleteMaintenanceVisitTodosByPrimaryID = async (id, result) => {
+  try {
+    let sql = `DELETE FROM maintenancevisittodos WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [id])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};

backend/models/masterMaintenanceTodosModel.js

@@ -0,0 +1,90 @@
+import ownConn from "../dbConfig.js";
+
+//get single master maintenance visit todo
+export const getMasterMaintenanceVisitTodoById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM mastermaintenancetodos WHERE templateID = ? ORDER BY rowID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update master maintenance visit to Database
+export const updateMasterMaintenanceVisitTodoById = async (data, result) => {
+    try {
+        const id = data.primaryID;
+        let sql = `UPDATE mastermaintenancetodos SET templateID = ?, asset = ? , task = ?, comments = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comments, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+
+// Delete master maintenance visit todo to Database
+export const deleteMasterMaintenanceVisitTodoById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM mastermaintenancetodos WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete master maintenance visit todo by templateID to Database
+export const deleteMasterMaintenanceVisitTodoByTemplateId = async (id, result) => {
+    try {
+        let sql = `DELETE FROM mastermaintenancetodos WHERE templateID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update all master maintenance visit todos to Database
+export const updateMasterMaintenanceVisitTodos = async (data, result) => {
+    try {
+        let sql = `UPDATE mastermaintenancetodos SET rowID = ? WHERE primaryID = ?`;
+        data.data.forEach(async i => {
+            let id = i.primaryID;
+            let rowId = i.rowID;
+            const results = await ownConn.query(sql, [rowId, id])
+            result(null, results);
+        });
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert master maintenance visit todo to databased
+export const insertMasterMaintenanceVisitTodo = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO mastermaintenancetodos(templateID, rowID, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, asset.comments])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/masterMaintenanceVisitsModel.js

@@ -0,0 +1,99 @@
+import ownConn from "../dbConfig.js";
+
+//get all master maintenance visits
+export const getMasterMaintenanceVisits = async (result) => {
+    try {
+        let sql = `SELECT * FROM mastermaintenancevisits ORDER BY name ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single master maintenance visit
+export const getMasterMaintenanceVisitById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE checklistID = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update master maintenance visit to Database
+export const updateMasterMaintenanceVisitById = async (data, result) => {
+    try {
+        const id = data.checklistID;
+        let sql = `UPDATE mastermaintenancevisits SET name = ?, customerID = ? , customer = ?, type = ?, lastView = ?, user = ?, notes = ? WHERE checklistID = ?`;
+        const results = await ownConn.query(sql, [data.name, data.customerID, data.customer, data.type, data.lastView, data.user, data.notes, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert master maintenance visit to databased
+export const insertMasterMaintenanceVisit = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO mastermaintenancevisits(name, customerID, customer, type, lastView, user, notes) VALUES(?, ?, ?, ?, ?, ?, ?)`, [data.name, data.customerID, data.customer, data.type, data.lastView, data.user, data.notes])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete master maintenance visit to Database
+export const deleteMasterMaintenanceVisitById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM mastermaintenancevisits WHERE checklistID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/masterProductionOrderTodosModel.js

@@ -0,0 +1,90 @@
+import ownConn from "../dbConfig.js";
+
+//get single master production order todo
+export const getMasterProductionOrderTodoById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM masterordertodos WHERE templateID = ? ORDER BY rowID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update master production order to Database
+export const updateMasterProductionOrderTodoById = async (data, result) => {
+    try {
+        const id = data.primaryID;
+        let sql = `UPDATE masterordertodos SET templateID = ?, asset = ? , task = ?, comment = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comment, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+
+// Delete master production order todo to Database
+export const deleteMasterProductionOrderTodoById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM masterordertodos WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete master production order todo by templateID to Database
+export const deleteMasterProductionOrderTodoByTemplateId = async (id, result) => {
+    try {
+        let sql = `DELETE FROM masterordertodos WHERE templateID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update all master production order todos to Database
+export const updateMasterProductionOrderTodos = async (data, result) => {
+    try {
+        let sql = `UPDATE masterordertodos SET rowID = ? WHERE primaryID = ?`;
+        data.data.forEach(async i => {
+            let id = i.primaryID;
+            let rowId = i.rowID;
+            const results = await ownConn.query(sql, [rowId, id])
+            result(null, results);
+        });
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert master production order todo to databased
+export const insertMasterProductionOrderTodo = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO masterordertodos(templateID, rowID, asset, task, comment) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/masterProductionOrdersModel.js

@@ -0,0 +1,99 @@
+import ownConn from "../dbConfig.js";
+
+//get all master production orders
+export const getMasterProductionOrders = async (result) => {
+    try {
+        let sql = `SELECT * FROM masterproductionorders ORDER BY name ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single master production order
+export const getMasterProductionOrderById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM masterproductionorders WHERE templateID = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update master production order to Database
+export const updateMasterProductionOrderById = async (data, result) => {
+    try {
+        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])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert master production order to databased
+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])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete master production order to Database
+export const deleteMasterProductionOrderById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM masterproductionorders WHERE templateID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/orderingInfoIssueSlipsModel.js

@@ -0,0 +1,72 @@
+import ownConn from "../dbConfig.js";
+
+//get single ordering info issue slip
+export const getOrderingInfoIssueSlipById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM orderinginfoissueslips WHERE issueSlipID = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update ordering info issue slip to Database
+export const updateOrderingInfoIssueSlipById = async (data, result) => {
+    try {
+        const id = data.primaryID;
+        let sql = `UPDATE orderinginfoissueslips SET issueSlipID = ?, article = ? , amount = ?, price = ?, comment = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.issueSlipID, data.article, data.amount, data.price, data.comment, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+
+// Delete ordering info issue slip to Database
+export const deleteOrderingInfoIssueSlipById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM orderinginfoissueslips WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete ordering info issue slip by issueSlipID to Database
+export const deleteOrderingInfoIssueSlipByIssueSlipId = async (id, result) => {
+    try {
+        let sql = `DELETE FROM orderinginfoissueslips WHERE issueSlipID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert ordering info issue slip to databased
+export const insertOrderingInfoIssueSlip = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO orderinginfoissueslips(issueSlipID, article, amount, price, comment) VALUES(?, ?, ?, ?, ?)`, [data.issueSlipID, data.article, data.amount, data.price, data.comment])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/productionOrdersModel.js

@@ -0,0 +1,155 @@
+import ownConn from "../dbConfig.js";
+
+//get all production orders
+export const getProductionOrders = async (result) => {
+    try {
+        let sql = `SELECT * FROM productionorders ORDER BY name ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected production orders by ticketnumber
+export const getSelectedProductionOrdersByTicketnumber = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM productionorders WHERE ticketNumber LIKE '%${selected}%' ORDER BY ticketNumber ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected production orders by date of creation
+export const getSelectedProductionOrdersByDate = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM productionorders WHERE creationDate LIKE '%${selected}%' ORDER BY creationDate ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete production order to Database
+export const deleteProductionOrderById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM productionorders WHERE ticketNumber = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert production order to database
+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])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single production order by name
+export const getProductionOrderByName = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM productionorders  WHERE name = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single production order by id
+export const getProductionOrderById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM productionorders  WHERE ticketNumber = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update production order state to Database
+export const updateProductionOrderStateById = async (data, result) => {
+    const id = data.ticketNumber;
+    try {
+        let sql = `UPDATE productionorders SET state = ? WHERE ticketNumber = ?`;
+        const results = await ownConn.query(sql, [data.state, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/productionOrdersTodosModel.js

@@ -0,0 +1,71 @@
+import ownConn from "../dbConfig.js";
+
+//insert production order todo to databased
+export const insertProductionOrderTodo = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO productionordertodos(templateID, step, asset, task, comment, done) VALUES(?, ?, ?, ?, ?, ?)`, [data.templateID, data.step, data.asset, data.task, data.comment, data.done]);
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single production order todo by id
+export const getProductionOrderTodosById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM productionordertodos WHERE templateID = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single production order todo by asset
+export const getProductionOrderTodosByAsset = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM productionordertodos WHERE asset = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update production order todo to Database
+export const updateProductionOrderTodoById = async (data, result) => {
+    try {
+        const id = data.primaryID;
+        let sql = `UPDATE productionordertodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, data.done, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete production order todos to Database
+export const deleteProductionOrderTodosChecklistID = async (id, result) => {
+    try {
+        let sql = `DELETE FROM productionordertodos WHERE templateID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/solutionsModel.js

@@ -0,0 +1,141 @@
+import ownConn from "../dbConfig.js";
+
+//get all solutions
+export const getSolutions = async (result) => {
+    try {
+        let sql = `SELECT * FROM solutions ORDER BY solutionName ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single solution by primaryID
+export const getSolutionById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM solutions WHERE primaryID = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single solution by name
+export const getSolutionByName = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM solutions WHERE solutionName = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert solution to databased
+export const insertSolution = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO solutions(solutionName, assetName, customer, customerID, type, lastView, user, description, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.solutionName, data.assetName, data.customer, data.customerID, data.type, data.lastView, data.user, data.description, data.notes])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update solution to Database
+export const updateSolutionById = async (data, result) => {
+    try {
+        const id = data.primaryID;
+        let sql = `UPDATE solutions SET solutionName = ?, assetName = ?, customer = ?, customerID = ?, type = ?, lastView = ?, user = ?, description = ?, notes = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.solutionName, data.assetName, data.customer, data.customerID, data.type, data.lastView, data.user, data.description, data.notes, id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+    try {
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//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`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete solution to Database
+export const deleteSolutionById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM solutions WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/usersModel.js

@@ -0,0 +1,59 @@
+import ownConn from "../dbConfig.js";
+
+//get all users
+export const getUsers = async (result) => {
+    let sql = `SELECT * FROM users ORDER BY fullName ASC`;
+    try {
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single user by id
+export const getUserById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM users  WHERE id = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update user to Database
+export const updateUserById = async (data, result) => {
+    try {
+        const id = data.id;
+        let sql = `UPDATE users SET username = ?, password = ?, fullName = ?, email = ?, phonenumber = ?, address = ?, city = ?, postcode = ?, adminBool = ?, technician1Bool = ?, technician2Bool = ?, technicianMonitoringBool = ?, merchantBool = ?, internBool = ? WHERE id = ?`;
+        const results = await ownConn.query(sql, [data.username, data.password, data.fullName, data.email, data.phonenumber, data.address, data.city, data.postcode, data.adminBool, data.technician1Bool, data.technician2Bool, data.technicianMonitoringBool, data.merchantBool, data.internBool, id]);
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+
+// Delete user to Database
+export const deleteUserById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM users WHERE id = ?`;
+        const results = await ownConn.query(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/routes/routes.js

@@ -0,0 +1,615 @@
+//import express
+import express from "express";
+
+import {
+    showConfigItems,
+    showConfigItemById,
+    showConfigItemByName,
+    showConfigItemByCustomerId,
+    updateConfigItem,
+    createConfigItem,
+    showSelectedConfigItemsByCustomer,
+    showSelectedConfigItemsByAssetName,
+    deleteConfigItem,
+} from "../controller/configItems.js"
+
+import {
+    showMaintenanceVisits,
+    showSelectedMaintenanceVisitsByChecklistname,
+    showSelectedMaintenanceVisitsByCustomer,
+    showSelectedMaintenanceVisitsByState,
+    showSelectedMaintenanceVisitsByDate,
+    deleteMaintenanceVisit,
+    createMaintenanceVisit,
+    showMaintenanceVisitByName,
+    showMaintenanceVisitById,
+    updateMaintenanceVisitState,
+} from "../controller/maintenanceVisits.js"
+
+import {
+    createMaintenanceVisitTodos,
+    showMaintenanceVisitTodosById,
+    showMaintenanceVisitTodosByAsset,
+    updateMaintenanceVisitTodo,
+    deleteMaintenanceVisitTodos,
+} from "../controller/maintenanceVisitTodos.js"
+
+import {
+    showMasterMaintenanceVisits,
+    showSelectedMasterMaintenanceVisitsByCustomer,
+    showSelectedMasterMaintenanceVisitsByChecklistname,
+    showMasterMaintenanceVisitById,
+    updateMasterMaintenanceVisit,
+    createMasterMaintenanceVisit,
+    deleteMasterMaintenanceVisit
+} from "../controller/masterMaintenanceVisits.js";
+
+import {
+    updateAllMasterMaintenanceVisitTodos,
+    showMasterMaintenanceVisitTodoById,
+    updateMasterMaintenanceVisitTodo,
+    createMasterMaintenanceVisitTodo,
+    deleteMasterMaintenanceVisitTodo,
+    deleteMasterMaintenanceVisitTodoByTemplateIds,
+} from "../controller/masterMaintenanceVisitsTodos.js";
+
+import {
+    showProductionOrders,
+    showSelectedProductionOrdersByChecklistname,
+    showSelectedProductionOrdersByCustomer,
+    showSelectedProductionOrdersByTicketnumber,
+    showSelectedProductionOrdersByDate,
+    showSelectedProductionOrdersByState,
+    deleteProductionOrder,
+    createProductionOrder,
+    showProductionOrderByName,
+    showProductionOrderById,
+    updateProductionOrderState,
+} from "../controller/productionOrders.js";
+
+import {
+    createProductionOrderTodos,
+    showProductionOrderTodosById,
+    showProductionOrderTodosByAsset,
+    updateProductionOrderTodo,
+    deleteProductionOrderTodos,
+} from "../controller/productionOrderTodos.js";
+
+import {
+    showMasterProductionOrders,
+    showSelectedMasterProductionOrdersByCustomer,
+    showSelectedMasterProductionOrdersByChecklistname,
+    showMasterProductionOrderById,
+    updateMasterProductionOrder,
+    createMasterProductionOrder,
+    deleteMasterProductionOrder,
+} from "../controller/masterProductionOrders.js"
+
+import {
+    showMasterProductionOrderTodoById,
+    updateMasterProductionOrderTodo,
+    deleteMasterProductionOrderTodo,
+    deleteMasterProductionOrderTodoByTemplateIds,
+    updateAllProductionOrderTodos,
+    createMasterProductionOrderTodo,
+} from "../controller/masterProductionOrderTodos.js";
+
+import {
+    showCustomers,
+    createCustomer,
+    showSelectedCustomers,
+    showCustomerByProductionOrderId,
+    showCustomerByMaintenanceVisitId,
+    showCustomerByCustomerId,
+    showCustomerByName,
+    updateCustomer,
+    deleteCustomer,
+} from "../controller/customers.js";
+
+import {
+    signUp,
+    login,
+    showUsers,
+    showUserById,
+    updateUser,
+    deleteUser,
+} from "../controller/users.js";
+
+import * as userMiddleware from "../middleware/users.js";
+
+import {
+    showSolutions,
+    showSelectedSolutionByCustomer,
+    showSelectedSolutionBySolutionName,
+    showSelectedSolutionByAssetName,
+    showSelectedSolutionByType,
+    createSolution,
+    showSolutionById,
+    showSolutionByName,
+    updateSolution,
+    deleteSolution,
+} from "../controller/solutions.js";
+
+import {
+    createChecklistSolutionTodos,
+    showChecklistSolutionTodosById,
+    showChecklistSolutionTodosByAsset,
+    updateChecklistSolutionTodo,
+    deleteChecklistSolutionTodosSolutionID,
+    deleteChecklistSolutionTodos,
+} from "../controller/checklistSolutions.js";
+
+import {
+    showIssueSlips,
+    showSelectedIssueSlipsByCustomer,
+    showSelectedIssueSlipsByTicketnumber,
+    showSelectedIssueSlipsByDate,
+    deleteIssueSlip,
+    deleteIssueSlipByTicketnumber,
+    createIssueSlip,
+    showIssueSlipByTicketNo,
+    showIssueSlipById,
+    updateIssueSlip,
+} from "../controller/issueSlips.js";
+
+import {
+    showOrderingInfoIssueSlipById,
+    deleteOrderingInfoIssueSlip,
+    deleteOrderingInfoIssueSlipByIssueSlipIds,
+    updateOrderingInfoIssueSlip,
+    createOrderingInfoIssueSlip,
+} from "../controller/orderingInfoIssueSlips.js";
+
+import {
+    deleteIssue,
+    createIssue,
+    showIssueById,
+    updateIssue,
+    showIssues,
+} from "../controller/issues.js";
+
+import {
+    showIssueVariants,
+    deleteIssueVariant,
+    deleteIssueVariantByIssueSlipIds,
+    createIssueVariant,
+    showIssueVariantById,
+    updateIssueVariant,
+    showSelectedIssueVariantsByIssueId,
+    showSelectedIssueVariantsByName,
+} from "../controller/issueVariants.js";
+
+
+
+//init express router
+const router = express.Router();
+
+
+// routes with master maintenance visits:
+// get all master maintenance visits
+router.get("/masterMaintenanceVisits", showMasterMaintenanceVisits);
+
+//get all master maintenance visits by id
+router.get("/masterMaintenanceVisit/:id", showMasterMaintenanceVisitById);
+
+// Update master maintenance visits
+router.put("/masterMaintenanceVisits", updateMasterMaintenanceVisit);
+
+//get all master maintenance visits by selected customer
+router.get("/selectedMasterMaintenanceVisitsByCustomer/:id", showSelectedMasterMaintenanceVisitsByCustomer)
+
+//get all master maintenance visits by selected checklistname
+router.get("/selectedMasterMaintenanceVisitsByChecklistname/:id", showSelectedMasterMaintenanceVisitsByChecklistname)
+
+// Create New master maintenance visits
+router.post("/masterMaintenanceVisits", createMasterMaintenanceVisit);
+
+// Delete master maintenance visits
+router.delete("/masterMaintenanceVisits/:id", deleteMasterMaintenanceVisit);
+
+
+
+// routes with master maintenance visit todos:
+//get all master maintenance visit todos by id
+router.get("/masterMaintenanceVisitTodos/:id", showMasterMaintenanceVisitTodoById);
+
+// Update master maintenance visit todos
+router.put("/masterMaintenanceVisitTodos", updateMasterMaintenanceVisitTodo);
+
+// Delete master maintenance visit todo
+router.delete("/masterMaintenanceVisitTodos/:id", deleteMasterMaintenanceVisitTodo);
+
+// Delete master maintenance visit todo by customer id
+router.delete("/masterMaintenanceVisitTodosByCustomerid/:id", deleteMasterMaintenanceVisitTodoByTemplateIds);
+
+// Update all master maintenance visit todos
+router.put("/allMasterMaintenanceVisitTodos", updateAllMasterMaintenanceVisitTodos)
+
+// Create New master maintenance visit todo
+router.post("/masterMaintenanceVisitTodos", createMasterMaintenanceVisitTodo);
+
+
+
+// routes with master production orders:
+// get all master production orders
+router.get("/masterProductionOrders", showMasterProductionOrders);
+
+//get all master production orders by id
+router.get("/masterProductionOrders/:id", showMasterProductionOrderById);
+
+// Update master production orders
+router.put("/masterProductionOrders", updateMasterProductionOrder);
+
+//get all master production orders by selected customer
+router.get("/selectedMasterProductionOrdersByCustomer/:id", showSelectedMasterProductionOrdersByCustomer)
+
+//get all master production orders by selected checklistname
+router.get("/selectedMasterProductionOrdersByChecklistname/:id", showSelectedMasterProductionOrdersByChecklistname)
+
+// Create New master production order
+router.post("/masterProductionOrders", createMasterProductionOrder);
+
+// Delete master production order
+router.delete("/masterProductionOrders/:id", deleteMasterProductionOrder);
+
+
+
+// routes with master production order todos:
+//get all master production order todos by id
+router.get("/masterProductionOrderTodos/:id", showMasterProductionOrderTodoById);
+
+// Update master production order todos
+router.put("/masterProductionOrderTodos", updateMasterProductionOrderTodo);
+
+// Delete master production order todo
+router.delete("/masterProductionOrderTodos/:id", deleteMasterProductionOrderTodo);
+
+// Delete master production order todo by customer id
+router.delete("/masterProductionOrderTodosByCustomerid/:id", deleteMasterProductionOrderTodoByTemplateIds);
+
+// Update all master production order todos
+router.put("/allMasterProductionOrderTodos", updateAllProductionOrderTodos)
+
+// Create New master production order todo
+router.post("/masterProductionOrderTodos", createMasterProductionOrderTodo);
+
+
+
+// routes with solutions:
+// get all solutions
+router.get("/solutions", showSolutions);
+
+//get solution by id
+router.get("/solutions/:id", showSolutionById);
+
+//get solution by name
+router.get("/solutionByName/:id", showSolutionByName);
+
+// Update solution
+router.put("/solutions", updateSolution);
+
+// Delete solution
+router.delete("/solutions/:id", deleteSolution);
+
+// Create new solution
+router.post("/solutions", createSolution);
+
+//Get all solutions by selected solution name
+router.get("/selectedSolutionsBySolutionName/:id", showSelectedSolutionBySolutionName);
+
+//Get all solutions by selected asset name
+router.get("/selectedSolutionsByAssetName/:id", showSelectedSolutionByAssetName);
+
+//Get all solutions by selected customer
+router.get("/selectedSolutionsByCustomer/:id", showSelectedSolutionByCustomer);
+
+//Get all solutions by selected type
+router.get("/selectedSolutionsByType/:id", showSelectedSolutionByType);
+
+
+
+// routes with checklist solution todos:
+// Create New checklist solution todos
+router.post("/checklistSolutionsTodos", createChecklistSolutionTodos);
+
+//get all checklist solution todos by id
+router.get("/checklistSolutionsTodos/:id", showChecklistSolutionTodosById);
+
+//get all checklist solution todos by assetname
+router.get("/checklistSolutionsTodosByAsset/:id", showChecklistSolutionTodosByAsset);
+
+// Update checklist solution todo
+router.put("/checklistSolutionsTodos", updateChecklistSolutionTodo);
+
+// Delete checklist solution todos based on solution ID
+router.delete("/checklistSolutionsTodosBySolutionID/:id", deleteChecklistSolutionTodosSolutionID);
+
+// Delete single checklist solution todos
+router.delete("/checklistSolutionsTodos/:id", deleteChecklistSolutionTodos);
+
+
+
+// routes with customers:
+//get all customers
+router.get("/customers", showCustomers);
+
+//get all customers by selected
+router.get("/selectedCustomers/:id", showSelectedCustomers);
+
+//get single customer by production order instance id
+router.get("/customersProductionOrder/:id", showCustomerByProductionOrderId);
+
+//get single customer by miantenance visit instance id
+router.get("/customerMaintenanceVisit/:id", showCustomerByMaintenanceVisitId);
+
+//get single customer by customer id
+router.get("/customer/:id", showCustomerByCustomerId);
+
+//get single customer by name
+router.get("/customerName/:id", showCustomerByName);
+
+// Update customer
+router.put("/customers", updateCustomer);
+
+// Delete customer
+router.delete("/customers/:id", deleteCustomer);
+
+// Create New customer
+router.post("/customers", createCustomer);
+
+
+
+// routes with config items:
+// get all config items
+router.get("/configItems", showConfigItems);
+
+//get single config item by id
+router.get("/configItem/:id", showConfigItemById);
+
+//get single config item by name
+router.get("/configItemByName/:id", showConfigItemByName);
+
+//get config items by customerid
+router.get("/configItemByCustomerID/:id", showConfigItemByCustomerId);
+
+// Update config item
+router.put("/configItem", updateConfigItem);
+
+// Create New config item
+router.post("/configItems", createConfigItem);
+
+//get all config items by customer
+router.get("/selectedConfigItemsByCustomer/:id", showSelectedConfigItemsByCustomer);
+
+//get all config items by assetname
+router.get("/selectedConfigItemsByAssetName/:id", showSelectedConfigItemsByAssetName);
+
+// Delete config item
+router.delete("/configItems/:id", deleteConfigItem);
+
+
+
+// routes with production orders:
+// get all production orders
+router.get("/productionOrders", showProductionOrders);
+
+//get all production orders by selected checklistname
+router.get("/selectedProductionOrdersByChecklistname/:id", showSelectedProductionOrdersByChecklistname)
+
+//get all production orders by selected ticketnumber
+router.get("/selectedProductionOrdersByTicketNumber/:id", showSelectedProductionOrdersByTicketnumber)
+
+//get all production orders by selected customer
+router.get("/selectedProductionOrdersByCustomer/:id", showSelectedProductionOrdersByCustomer)
+
+//get all production orders by selected state
+router.get("/selectedProductionOrdersByState/:id", showSelectedProductionOrdersByState)
+
+//get all production orders by selected date
+router.get("/selectedProductionOrdersByDate/:id", showSelectedProductionOrdersByDate)
+
+// Delete production order
+router.delete("/productionOrder/:id", deleteProductionOrder);
+
+// Create New production order
+router.post("/productionOrder", createProductionOrder);
+
+//get production order by name
+router.get("/productionOrderByName/:id", showProductionOrderByName);
+
+//get single production order by ticketNumber
+router.get("/productionOrder/:id", showProductionOrderById);
+
+// Update production order state
+router.put("/productionOrderState", updateProductionOrderState);
+
+
+
+// routes with production order todos:
+// Create New production order todos
+router.post("/productionOrderTodos", createProductionOrderTodos);
+
+//get all production order todos by id
+router.get("/productionOrderTodos/:id", showProductionOrderTodosById);
+
+//get all production order todos by assetname
+router.get("/productionOrderTodosByAsset/:id", showProductionOrderTodosByAsset);
+
+// Update production order todo
+router.put("/productionOrderTodos", updateProductionOrderTodo);
+
+// Delete production order todos
+router.delete("/productionOrderTodos/:id", deleteProductionOrderTodos);
+
+
+
+// routes with maintenance visits:
+//get all maintenance visits
+router.get("/maintenanceVisits", showMaintenanceVisits);
+
+//get all maintenance visits by selected checklistname
+router.get("/selectedMaintenanceVisitsByChecklistname/:id", showSelectedMaintenanceVisitsByChecklistname)
+
+//get all maintenance visits by selected date
+router.get("/selectedMaintenanceVisitsByDate/:id", showSelectedMaintenanceVisitsByDate)
+
+//get all maintenance visits by selected customer
+router.get("/selectedMaintenanceVisitsByCustomer/:id", showSelectedMaintenanceVisitsByCustomer)
+
+//get all maintenance visits by selected state
+router.get("/selectedMaintenanceVisitsByState/:id", showSelectedMaintenanceVisitsByState)
+
+// Delete maintenance visit
+router.delete("/maintenanceVisit/:id", deleteMaintenanceVisit);
+
+// Create New maintenance visit
+router.post("/maintenanceVisit", createMaintenanceVisit);
+
+//get maintenance visit by name
+router.get("/maintenanceVisitByName/:id", showMaintenanceVisitByName);
+
+//get single maintenance visit by primaryId
+router.get("/maintenanceVisit/:id", showMaintenanceVisitById);
+
+// Update maintenance visit state
+router.put("/maintenanceVisitState", updateMaintenanceVisitState);
+
+
+
+// routes with maintenance visit todos:
+//create new maintenance visit todos
+router.post("/maintenanceVisitTodos", createMaintenanceVisitTodos);
+
+//get all maintenance visit todos by id
+router.get("/maintenanceVisitTodos/:id", showMaintenanceVisitTodosById);
+
+//get all maintenance visit todos by assetname
+router.get("/maintenanceVisitTodosByAsset/:id", showMaintenanceVisitTodosByAsset);
+
+// Update maintenance visit todo
+router.put("/maintenanceVisitTodos", updateMaintenanceVisitTodo);
+
+// Delete maintenance visit todos
+router.delete("/maintenanceVisitTodos/:id", deleteMaintenanceVisitTodos);
+
+
+
+// routes with issue slips:
+// get all issue slips
+router.get("/issueSlips", showIssueSlips);
+
+//get all issue slips by selected ticketnumber
+router.get("/selectedIssueSlipsByTicketNumber/:id", showSelectedIssueSlipsByTicketnumber)
+
+//get all issue slips by selected customer
+router.get("/selectedIssueSlipsByCustomer/:id", showSelectedIssueSlipsByCustomer)
+
+//get all issue slips by selected date
+router.get("/selectedIssueSlipsByDate/:id", showSelectedIssueSlipsByDate)
+
+// Delete issue slip
+router.delete("/issueSlip/:id", deleteIssueSlip);
+
+// Delete issue slips by ticketnumber
+router.delete("/issueSlipByTicketNo/:id", deleteIssueSlipByTicketnumber);
+
+// Create New issue slip
+router.post("/issueSlip", createIssueSlip);
+
+//get issue slips by ticketNumber
+router.get("/issueSlipByTicketNo/:id", showIssueSlipByTicketNo);
+
+//get single issue slip
+router.get("/issueSlip/:id", showIssueSlipById);
+
+// Update issue slip
+router.put("/issueSlip", updateIssueSlip);
+
+
+
+// routes with ordering info issue slips:
+//get all ordering info issue slips by id
+router.get("/orderingInfoIssueSlips/:id", showOrderingInfoIssueSlipById);
+
+// Update ordering info issue slip
+router.put("/orderingInfoIssueSlips", updateOrderingInfoIssueSlip);
+
+// Delete ordering info issue slip
+router.delete("/orderingInfoIssueSlips/:id", deleteOrderingInfoIssueSlip);
+
+// Delete ordering info issue slip by issue id
+router.delete("/orderingInfoIssueSlipsByIssueSlipId/:id", deleteOrderingInfoIssueSlipByIssueSlipIds);
+
+// Create New ordering info issue slip
+router.post("/orderingInfoIssueSlips", createOrderingInfoIssueSlip);
+
+
+
+// routes with issues:
+// get all issues
+router.get("/issues", showIssues);
+
+//get issue by id
+router.get("/issues/:id", showIssueById);
+
+// Update issue
+router.put("/issues", updateIssue);
+
+// Delete issue
+router.delete("/issues/:id", deleteIssue);
+
+// Create New issue
+router.post("/issues", createIssue);
+
+
+
+// routes with issue variants:
+// get all issue variants
+router.get("/issueVariants", showIssueVariants);
+
+//get issue variant by id
+router.get("/issueVariants/:id", showIssueVariantById);
+
+// Create New issue variant
+router.post("/issueVariants", createIssueVariant);
+
+// get all issue variants by selected issueID
+router.get("/selectedIssueVariantsByIssueId/:id", showSelectedIssueVariantsByIssueId)
+
+// get all issue variants by selected name
+router.get("/selectedIssueVariantsByName/:id", showSelectedIssueVariantsByName)
+
+// Update issue variant
+router.put("/issueVariants", updateIssueVariant);
+
+// Delete issue variant
+router.delete("/issueVariants/:id", deleteIssueVariant);
+
+// Delete issue variant by issue id
+router.delete("/issueVariantsByIssueSlipId/:id", deleteIssueVariantByIssueSlipIds);
+
+
+
+// routes with users:
+// sign-up process
+router.post('/signUp', userMiddleware.validateRegister, signUp);
+
+// login process
+router.post('/login', login);
+
+// get all users
+router.get("/users", showUsers);
+
+//get user by id
+router.get("/user/:id", showUserById);
+
+// Update user
+router.put("/user", updateUser);
+
+// Delete user
+router.delete("/user/:id", deleteUser);
+
+
+
+//export default router
+export default router;

certs/fullchain.pem

@@ -0,0 +1,86 @@
+-----BEGIN CERTIFICATE-----
+MIIEJjCCAw6gAwIBAgISBH1fpnN5tMAmG9rSrKXMtWHmMA0GCSqGSIb3DQEBCwUA
+MDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQD
+EwJSMzAeFw0yNDAyMDcxMTI4MzFaFw0yNDA1MDcxMTI4MzBaMBwxGjAYBgNVBAMT
+EXR1ZWl0YXBwLnR1ZWl0LmRlMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEp/Sf
+OcRDk6oMEUZnRMyOpMdVWJB6Q0Hs3Ly9QHoEjCwJaPXo5dRLilcb9cgU7omZYoyN
+Tf6ilHAvxGkr/k/saaOCAhUwggIRMA4GA1UdDwEB/wQEAwIHgDAdBgNVHSUEFjAU
+BggrBgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQU9GpF
+/YlVXjNNI8WDy9HBmmx6JMEwHwYDVR0jBBgwFoAUFC6zF7dYVsuuUAlA5h+vnYsU
+wsYwVQYIKwYBBQUHAQEESTBHMCEGCCsGAQUFBzABhhVodHRwOi8vcjMuby5sZW5j
+ci5vcmcwIgYIKwYBBQUHMAKGFmh0dHA6Ly9yMy5pLmxlbmNyLm9yZy8wHAYDVR0R
+BBUwE4IRdHVlaXRhcHAudHVlaXQuZGUwEwYDVR0gBAwwCjAIBgZngQwBAgEwggEG
+BgorBgEEAdZ5AgQCBIH3BIH0APIAdwA7U3d1Pi25gE6LMFsG/kA7Z9hPw/THvQAN
+LXJv4frUFwAAAY2DiovMAAAEAwBIMEYCIQDUiw7jGx4k8y49+QeuGNUX6WciOA0s
+Jipwvi+tjOumGgIhAN2jCoI3iQmpAYN3SvfieUPrAgd2X3RfZa0OzW91XYHWAHcA
+ouK/1h7eLy8HoNZObTen3GVDsMa1LqLat4r4mm31F9gAAAGNg4qMPQAABAMASDBG
+AiEAoA4lggVcXpGHlGLqJwVaKdcTsMEM9hsRaPnwtLeRNnMCIQCMUElVlogieFjP
+hroL/raJrPrakqu9qOm0U3OW8aGPGzANBgkqhkiG9w0BAQsFAAOCAQEAFbGv7Omn
+OWIW6/9zpasBhxOXNNxz5G1YDKnktgK9qrCius39oexbaxyRCgQj7Y2aVirjHEct
+pFkpqdT8oRxOwym3UnTe6en/KqSzahuTLxKsWzvt+zYScEAbdv+ShAycojvuCbcN
+NTzZzVbk5iT2GjPyzB+wBEbEILy1NFzf5sHBTsWOnbClidKpUvYgK6wuEoHb6DPP
+cfI5OHRU/cOB6rljYZYzz4znhNYuwviBUXEf1qIOfPDxZnM0zrh6eJ4wRXZDdGkn
+FQdmweAZn/dUpBEjRNuqSF4tGRKRtKZ3PQBNK35yAI4rFROJquhoQXxJK8XrAYyz
+KJl4MTF4Rk5VMQ==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFFjCCAv6gAwIBAgIRAJErCErPDBinU/bWLiWnX1owDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMjAwOTA0MDAwMDAw
+WhcNMjUwOTE1MTYwMDAwWjAyMQswCQYDVQQGEwJVUzEWMBQGA1UEChMNTGV0J3Mg
+RW5jcnlwdDELMAkGA1UEAxMCUjMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK
+AoIBAQC7AhUozPaglNMPEuyNVZLD+ILxmaZ6QoinXSaqtSu5xUyxr45r+XXIo9cP
+R5QUVTVXjJ6oojkZ9YI8QqlObvU7wy7bjcCwXPNZOOftz2nwWgsbvsCUJCWH+jdx
+sxPnHKzhm+/b5DtFUkWWqcFTzjTIUu61ru2P3mBw4qVUq7ZtDpelQDRrK9O8Zutm
+NHz6a4uPVymZ+DAXXbpyb/uBxa3Shlg9F8fnCbvxK/eG3MHacV3URuPMrSXBiLxg
+Z3Vms/EY96Jc5lP/Ooi2R6X/ExjqmAl3P51T+c8B5fWmcBcUr2Ok/5mzk53cU6cG
+/kiFHaFpriV1uxPMUgP17VGhi9sVAgMBAAGjggEIMIIBBDAOBgNVHQ8BAf8EBAMC
+AYYwHQYDVR0lBBYwFAYIKwYBBQUHAwIGCCsGAQUFBwMBMBIGA1UdEwEB/wQIMAYB
+Af8CAQAwHQYDVR0OBBYEFBQusxe3WFbLrlAJQOYfr52LFMLGMB8GA1UdIwQYMBaA
+FHm0WeZ7tuXkAXOACIjIGlj26ZtuMDIGCCsGAQUFBwEBBCYwJDAiBggrBgEFBQcw
+AoYWaHR0cDovL3gxLmkubGVuY3Iub3JnLzAnBgNVHR8EIDAeMBygGqAYhhZodHRw
+Oi8veDEuYy5sZW5jci5vcmcvMCIGA1UdIAQbMBkwCAYGZ4EMAQIBMA0GCysGAQQB
+gt8TAQEBMA0GCSqGSIb3DQEBCwUAA4ICAQCFyk5HPqP3hUSFvNVneLKYY611TR6W
+PTNlclQtgaDqw+34IL9fzLdwALduO/ZelN7kIJ+m74uyA+eitRY8kc607TkC53wl
+ikfmZW4/RvTZ8M6UK+5UzhK8jCdLuMGYL6KvzXGRSgi3yLgjewQtCPkIVz6D2QQz
+CkcheAmCJ8MqyJu5zlzyZMjAvnnAT45tRAxekrsu94sQ4egdRCnbWSDtY7kh+BIm
+lJNXoB1lBMEKIq4QDUOXoRgffuDghje1WrG9ML+Hbisq/yFOGwXD9RiX8F6sw6W4
+avAuvDszue5L3sz85K+EC4Y/wFVDNvZo4TYXao6Z0f+lQKc0t8DQYzk1OXVu8rp2
+yJMC6alLbBfODALZvYH7n7do1AZls4I9d1P4jnkDrQoxB3UqQ9hVl3LEKQ73xF1O
+yK5GhDDX8oVfGKF5u+decIsH4YaTw7mP3GFxJSqv3+0lUFJoi5Lc5da149p90Ids
+hCExroL1+7mryIkXPeFM5TgO9r0rvZaBFOvV2z0gp35Z0+L4WPlbuEjN/lxPFin+
+HlUjr8gRsI3qfJOQFy/9rKIJR0Y/8Omwt/8oTWgy1mdeHmmjk7j1nYsvC9JSQ6Zv
+MldlTTKB3zhThV1+XWYp6rjd5JW1zbVWEkLNxE7GJThEUG3szgBVGP7pSWTUTsqX
+nLRbwHOoq7hHwg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
+MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
+DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwggIiMA0GCSqGSIb3DQEB
+AQUAA4ICDwAwggIKAoICAQCt6CRz9BQ385ueK1coHIe+3LffOJCMbjzmV6B493XC
+ov71am72AE8o295ohmxEk7axY/0UEmu/H9LqMZshftEzPLpI9d1537O4/xLxIZpL
+wYqGcWlKZmZsj348cL+tKSIG8+TA5oCu4kuPt5l+lAOf00eXfJlII1PoOK5PCm+D
+LtFJV4yAdLbaL9A4jXsDcCEbdfIwPPqPrt3aY6vrFk/CjhFLfs8L6P+1dy70sntK
+4EwSJQxwjQMpoOFTJOwT2e4ZvxCzSow/iaNhUd6shweU9GNx7C7ib1uYgeGJXDR5
+bHbvO5BieebbpJovJsXQEOEO3tkQjhb7t/eo98flAgeYjzYIlefiN5YNNnWe+w5y
+sR2bvAP5SQXYgd0FtCrWQemsAXaVCg/Y39W9Eh81LygXbNKYwagJZHduRze6zqxZ
+Xmidf3LWicUGQSk+WT7dJvUkyRGnWqNMQB9GoZm1pzpRboY7nn1ypxIFeFntPlF4
+FQsDj43QLwWyPntKHEtzBRL8xurgUBN8Q5N0s8p0544fAQjQMNRbcTa0B7rBMDBc
+SLeCO5imfWCKoqMpgsy6vYMEG6KDA0Gh1gXxG8K28Kh8hjtGqEgqiNx2mna/H2ql
+PRmP6zjzZN7IKw0KKP/32+IVQtQi0Cdd4Xn+GOdwiK1O5tmLOsbdJ1Fu/7xk9TND
+TwIDAQABo4IBRjCCAUIwDwYDVR0TAQH/BAUwAwEB/zAOBgNVHQ8BAf8EBAMCAQYw
+SwYIKwYBBQUHAQEEPzA9MDsGCCsGAQUFBzAChi9odHRwOi8vYXBwcy5pZGVudHJ1
+c3QuY29tL3Jvb3RzL2RzdHJvb3RjYXgzLnA3YzAfBgNVHSMEGDAWgBTEp7Gkeyxx
++tvhS5B1/8QVYIWJEDBUBgNVHSAETTBLMAgGBmeBDAECATA/BgsrBgEEAYLfEwEB
+ATAwMC4GCCsGAQUFBwIBFiJodHRwOi8vY3BzLnJvb3QteDEubGV0c2VuY3J5cHQu
+b3JnMDwGA1UdHwQ1MDMwMaAvoC2GK2h0dHA6Ly9jcmwuaWRlbnRydXN0LmNvbS9E
+U1RST09UQ0FYM0NSTC5jcmwwHQYDVR0OBBYEFHm0WeZ7tuXkAXOACIjIGlj26Ztu
+MA0GCSqGSIb3DQEBCwUAA4IBAQAKcwBslm7/DlLQrt2M51oGrS+o44+/yQoDFVDC
+5WxCu2+b9LRPwkSICHXM6webFGJueN7sJ7o5XPWioW5WlHAQU7G75K/QosMrAdSW
+9MUgNTP52GE24HGNtLi1qoJFlcDyqSMo59ahy2cI2qBDLKobkx/J3vWraV0T9VuG
+WCLKTVXkcGdtwlfFRjlBz4pYg1htmf5X6DYO8A4jqv2Il9DjXA6USbW1FzXSLr9O
+he8Y4IWS6wY7bCkjCWDcRQJMEhg76fsO3txE+FiYruq9RUWhiF1myv4Q6W+CyBFC
+Dfvp7OOGAN6dEOM4+qR9sdjoSYKEBpsr6GtPAQw4dy753ec5
+-----END CERTIFICATE-----

certs/privkey.pem

@@ -0,0 +1,5 @@
+-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgAYAjn8GuqhyMWJyf
+Bxt8nTpBWm3S06NgzF1sjJqFijmhRANCAASn9J85xEOTqgwRRmdEzI6kx1VYkHpD
+QezcvL1AegSMLAlo9ejl1EuKVxv1yBTuiZlijI1N/qKUcC/EaSv+T+xp
+-----END PRIVATE KEY-----

clientsideConfig.js

@@ -0,0 +1,8 @@
+const clientsideConfig = {
+    // later for the server
+    //url: 'tueitapp.tueit.de',
+    url: 'localhost',
+    port: 3000,
+};
+
+export default clientsideConfig;

components/AssetSearch.vue

@@ -0,0 +1,82 @@
+<template>
+    <section :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Asset:</div>
+        <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset name</pre>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+  
+<script>
+export default {
+    name: "AssetSearch",
+};
+</script> 
+  
+    
+<style scoped>
+.asset-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;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.label {
+    width: 4.188em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-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;
+}
+
+.pre-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.pre-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+</style>
+    

components/ClientSearch.vue

@@ -0,0 +1,114 @@
+<template>
+  <section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
+    <pre v-if="!filtered" :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ clientFilter }}</pre>
+    <input v-if="filtered" v-model="clientFilter" @change="filterConfigItemList()"
+      :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+  </section>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+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 darkMode = ref(true)
+
+// update filtered term
+const updateFilterTerm = () => {
+  clientFilter.value = filteredTerm.value
+}
+
+// update the filtered term in the store
+const filterConfigItemList = () => {
+  store.commit('updateAssetFilterbyClient', clientFilter.value);
+}
+
+watch(filteredTerm, updateFilterTerm)
+</script>
+
+<script>
+export default {
+  name: "ClientSearch",
+};
+</script>
+
+<style scoped>
+.client-search {
+  display: flex;
+  align-items: center;
+  padding: 0.625em 1.875em;
+  gap: 1.25em;
+  width: 30.125em;
+  height: 3.125em;
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+  border-radius: 0.625em;
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #fff;
+}
+
+.label {
+  width: 2.5625em;
+  height: 1.875em;
+  font-family: "Overpass";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.875;
+  letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-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;
+}
+
+.pre-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.pre-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+
+.input {
+  border: none;
+}
+
+.data-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.data-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+</style>

components/Dashboard.vue

@@ -0,0 +1,99 @@
+<template>
+  <section :class="['dashboard', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">My tasks</h2>
+    <div class="shortcuts">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
+        value="My Maintenance Visits">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
+        value="My Production Orders">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="My Solutions">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
+        value="My Issue Slips">
+    </div>
+  </section>
+</template>
+
+
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "Dashboard",
+};
+</script> 
+  
+  
+<style scoped>
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 1.875rem 3.125rem 3.125rem;
+  gap: 1.25rem;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #fff;
+}
+
+.heading {
+  letter-spacing: 5%;
+  text-decoration-line: underline;
+  font: 400 1rem/2rem Overpass, sans-serif;
+}
+
+.heading-darkmode {
+  color: #fff;
+}
+
+.heading-lightmode {
+  color: #000;
+}
+
+.shortcuts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-content: center;
+  padding: 0.625rem 2.5rem;
+  gap: 2.5rem;
+}
+
+input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 15rem;
+  height: 4rem;
+  border-radius: 0.625rem;
+  padding: 0.9375rem 1.25rem;
+  border: none;
+  text-align: center;
+  letter-spacing: 5%;
+  font: 400 0.875rem/2rem Overpass, sans-serif;
+}
+
+.input-darkmode {
+  color: #fff;
+  background-color: #343434;
+}
+
+.input-lightmode {
+  color: #000;
+  background-color: #E4E4E4;
+}
+</style>

components/LoginForm.vue

@@ -0,0 +1,369 @@
+<template>
+  <form :class="['login-form', darkMode ? 'form-darkmode' : 'form-lightmode']">
+    <div class="title-field">
+      <span class="title-icon" id="logo-icon">
+        <img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
+      </span>
+      <pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
+    </div>
+    <div class="login-field">
+      <div class="form-field" id="username-field">
+        <label for="username-input" id="username-label">
+          <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
+            <img loading="lazy" src="../icons/Mail-Icon.svg" />
+          </span>
+          <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
+        </label>
+        <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
+          <input type="text" id="username-input" placeholder="user@example.com">
+        </div>
+      </div>
+      <div class="form-field" id="password-field">
+        <label for="password-input" id="password-label">
+          <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
+            <img loading="lazy" src="../icons/Lock-Icon.svg" />
+          </span>
+          <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
+        </label>
+        <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
+          <input type="text" id="password-input" placeholder="*******">
+          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
+            value="Show">
+        </div>
+      </div>
+    </div>
+    <div v-if="isError" class="form-field-error-msg" id="password-field">
+      <label>
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
+      </label>
+    </div>
+    <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
+      @click="handleLogin">
+    <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Signup"
+      @click="testFunctionSignup">
+  </form>
+</template>
+
+
+<script setup>
+import { useRouter } from 'vue-router';
+import { ref } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../clientsideConfig.js';
+
+const router = useRouter();
+const darkMode = ref(true);
+const isError = ref(false);
+const errorMsg = ref('');
+
+const handleLogin = async () => {
+  isError.value = false;
+  errorMsg.value = '';
+
+  const username = document.getElementById('username-input').value;
+  const password = document.getElementById('password-input').value;
+
+  const requestBody = {
+    username: username,
+    password: password,
+  }
+
+  try {
+    let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
+
+    // something to do with the res?
+    console.log(res.data)
+
+    // sucessfully logged in
+    router.push('/')
+  } catch (err) {
+    // handle the error 
+    console.log(err.response.statusText)
+    isError.value = true;
+    errorMsg.value = err.response.statusText;
+  }
+}
+
+const testFunctionSignup = async () => {
+  isError.value = false;
+  errorMsg.value = '';
+
+  const username = 'franzzzzzrtg'
+  const password = '112345678'
+  const password_repeat = '112345678'
+  const fullName = 'hallo'
+  const email = 'test.sdj@web.de'
+  const phonenumber = '015736283729'
+  const address = 'Strasse'
+  const city = 'tuebingen'
+  const postcode = '72121'
+  const adminBool = false
+  const technician1Bool = false
+  const technician2Bool = false
+  const technicianMonitoringBool = false
+  const merchantBool = false
+  const internBool = true
+
+  const requestBody = {
+    username: username,
+    password: password,
+    password_repeat: password_repeat,
+    fullName: fullName,
+    email: email,
+    phonenumber: phonenumber,
+    address: address,
+    city: city,
+    postcode: postcode,
+    adminBool: adminBool,
+    technician1Bool: technician1Bool,
+    technician2Bool: technician2Bool,
+    technicianMonitoringBool: technicianMonitoringBool,
+    merchantBool: merchantBool,
+    internBool: internBool,
+  }
+
+  try {
+    let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/signup`, requestBody);
+
+    // something to do with the res?
+    console.log(res)
+
+  } catch (err) {
+    // handle the error 
+    console.log(err.response.statusText)
+    isError.value = true;
+    errorMsg.value = err.response.statusText;
+  }
+}
+</script>
+
+<script>
+export default {
+  name: "LoginForm",
+  data() {
+    return {
+      // isError: false,
+      // errorMsg: '',
+    }
+  }
+}
+</script> 
+  
+
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 31.25rem;
+  height: 33rem;
+  border-radius: 0.625rem;
+  padding: 2.5rem 1.875rem;
+  gap: 1.875rem;
+}
+
+.form-darkmode {
+  border: 0.0625rem solid #000;
+  background-color: #2c2c2c;
+}
+
+.form-lightmode {
+  border: 0.0625rem solid #8e8e8e;
+  background-color: #fff;
+}
+
+.title-field {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+}
+
+.title-icon {
+  justify-content: center;
+  align-items: center;
+  width: 3.125rem;
+  height: 3.125rem;
+}
+
+.title-icon>img {
+  width: 3.125rem;
+  height: 3.125rem;
+  object-fit: contain;
+  object-position: center;
+  overflow: hidden;
+}
+
+.title {
+  margin: 0;
+  letter-spacing: 5%;
+  white-space: nowrap;
+  font: 400 1.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode,
+.title-darkmode {
+  color: #fff;
+}
+
+.pre-lightmode,
+.title-lightmode {
+  color: #000;
+}
+
+.login-field {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.625rem 1.25rem;
+  gap: 1.25rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 25rem;
+  height: 5rem;
+  padding: 0.625rem;
+  gap: 0.625rem;
+}
+
+.form-field-error-msg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 25rem;
+  height: 3rem;
+  gap: 0.4rem;
+}
+
+label {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: fit-content;
+  height: 1.875rem;
+  gap: 0.625rem;
+}
+
+.icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 1.875rem;
+  height: 1.875rem;
+}
+
+.icon>img {
+  object-fit: contain;
+  object-position: center;
+  overflow: hidden;
+}
+
+.icon-darkmode>img {
+  filter: invert(100%);
+}
+
+.icon-lightmode>img {
+  filter: invert(0%);
+}
+
+#username-icon>img {
+  width: auto;
+  height: 0.9375rem;
+}
+
+#password-icon>img {
+  width: 0.9375rem;
+  height: auto;
+}
+
+.label {
+  letter-spacing: 2%;
+  font: 400 0.9375rem/1.875rem Overpass, sans-serif;
+}
+
+.label-darkmode {
+  color: #fff;
+}
+
+.label-lightmode {
+  color: #000;
+}
+
+.input-field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: stretch;
+  align-self: stretch;
+  width: 100%;
+  height: 1.875rem;
+  border-radius: 0.3125rem;
+  padding: 0.1875rem 0.625rem;
+  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+}
+
+.input-darkmode {
+  background-color: #212121;
+}
+
+.input-lightmode {
+  background-color: #EBEBEB;
+}
+
+input[type=text] {
+  width: 100%;
+  height: 100%;
+  background-color: #00000000;
+  border: none;
+  color: #8e8e8e;
+  letter-spacing: 5%;
+  white-space: nowrap;
+  font: 100 0.75rem/1.25rem Overpass, sans-serif;
+}
+
+input[type=button] {
+  width: fit-content;
+  align-self: flex-end;
+  background-color: #00000000;
+  border: none;
+  letter-spacing: 5%;
+  white-space: nowrap;
+  font: 300 0.75rem/1.25rem Overpass, sans-serif;
+}
+
+.button-darkmode {
+  color: #fff;
+}
+
+.button-lightmode {
+  color: #000;
+}
+
+#login-button {
+  width: 13.75rem;
+  height: 4.375rem;
+  padding: 0.625rem;
+  border-radius: 0.625rem;
+  align-self: center;
+  border: none;
+  color: #000;
+  background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
+  letter-spacing: 2%;
+  white-space: nowrap;
+  font: 600 1.25rem/1.875rem Overpass, sans-serif;
+}
+</style>

components/QuickAccess.vue

@@ -0,0 +1,105 @@
+<template>
+  <section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <h2 :class="['heading', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Quick Access</h2>
+    <div class="shortcuts">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="pins" value="Pins">
+      <!--<input type="button" id="maintenance-visits" value="My Maintenance Visits">
+      <input type="button" id="production-orders" value="My Production Orders">
+      <input type="button" id="solutions" value="My Solutions">
+      <input type="button" id="issue-slips" value="My Issue Slips">-->
+    </div>
+  </section>
+</template>
+
+
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "QuickAccess",
+};
+</script> 
+
+
+<style scoped>
+.quick-access {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 1.875rem 3.125rem 3.125rem;
+  gap: 1.25rem;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #fff;
+}
+
+.heading {
+  color: #fff;
+  letter-spacing: 5%;
+  text-decoration-line: underline;
+  font: 400 1rem/2rem Overpass, sans-serif;
+}
+
+.h2-darkmode {
+  color: #fff;
+}
+
+.h2-lightmode {
+  color: #000;
+}
+
+.shortcuts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-content: center;
+  padding: 0.625rem 2.5rem;
+  gap: 2.5rem;
+}
+
+input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 15rem;
+  height: 4rem;
+  border-radius: 0.625rem;
+  padding: 0.9375rem 1.25rem;
+  border: none;
+  text-align: center;
+  letter-spacing: 5%;
+  font: 400 0.875rem/2rem Overpass, sans-serif;
+}
+
+.input-darkmode {
+  color: #fff;
+  background-color: #343434;
+}
+
+.input-lightmode {
+  color: #000;
+  background-color: #E4E4E4;
+}
+
+input#pins {
+  border: 0.0625rem dashed #454545;
+  color: #8e8e8e;
+  font: 400 0.875rem/2rem Overpass, sans-serif;
+  background-color: #34343400;
+}
+</style>

components/TemplateSearch.vue

@@ -0,0 +1,82 @@
+<template>
+  <section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
+    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
+  </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "TemplateSearch",
+};
+</script> 
+
+  
+<style scoped>
+.template-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;
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #fff;
+}
+
+.label {
+  width: 4.188em;
+  height: 1.875em;
+  font-family: "Overpass";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.875;
+  letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-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;
+}
+
+.pre-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.pre-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+</style>
+  

components/server/Accounting.vue

@@ -0,0 +1,263 @@
+<template>
+    <section :class="['accounting-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting:
+            <div class="asset-data">
+                <table class="data-table" id="asset-table-no-client">
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Action</th>
+                            <th
+                                :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                Date</th>
+                            <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Supplier request</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Supplier offer</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Client offer</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Client order</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Supplier order</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Ingress</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Egress</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Ingress bill</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Egress bill</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+</template>
+    
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "Accounting",
+};
+</script>      
+      
+      
+<style scoped>
+.accounting-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 1rem/1.875rem Overpass, sans-serif;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.label#accounting {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    padding-left: 0.625rem;
+    padding-top: 1rem;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.first-tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.first-tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+.final-tr-darkmode {
+    background-color: #212121;
+}
+
+.final-tr-lightmode {
+    background-color: #EBEBEB;
+}
+
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+tr#row-2 {
+    margin-bottom: 0.75rem;
+}
+
+
+.Action {
+    width: 40%;
+}
+
+.Action-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Action-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Date {
+    width: 20%;
+}
+
+.Date-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Date-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 40%;
+}
+</style>

components/server/Asset.vue

@@ -0,0 +1,571 @@
+<template>
+    <section v-if="!addAssetBool" :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()"
+            :class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="asset-data">
+            <div class="client-location">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
+                    <select v-if="editable" id="customersDropDownChosenCI" v-model="item.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="location">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
+                    <input v-if="editable" v-model="item.location" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="info">
+                <div class="id-type">
+                    <div class="data-field" id="id">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.primaryID }}</pre>
+                    </div>
+                    <div class="data-field" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
+                        <input v-if="editable" v-model="item.type" @change="updateConfigItem()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+                <div class="remoteLocation-state">
+                    <div class="data-field" id="remote-location">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
+                        <input v-if="editable" v-model="item.remoteLocation" @change="updateConfigItem()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.state }}</pre>
+                        <input v-if="editable" v-model="item.state" @change="updateConfigItem()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+            <div class="rectangle-container">
+                <div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
+            </div>
+        </div>
+        <div class="asset-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
+                    <input v-model="item.description" :readonly="!editable" @change="updateConfigItem()"
+                        :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="item.notes" :readonly="!editable" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addAssetBool" :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">
+            <div class="client-location">
+                <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="location">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
+                    <input v-model="newLocation" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="info">
+                <div class="id-type">
+                    <div class="data-field" id="id">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> ... </pre>
+                    </div>
+                    <div class="data-field" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <input v-model="newType" @change="updateAsset()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+                <div class="remoteLocation-state">
+                    <div class="data-field" id="remote-location">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
+                        <input v-model="newRemoteLocation" @change="updateAsset()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <input v-model="newState" @change="updateAsset()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+            <div class="rectangle-container">
+                <div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
+            </div>
+        </div>
+        <div class="asset-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
+                    <input v-model="newDescription" @change="updateAsset()"
+                        :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="newNotes" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+<script setup>
+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 store = useStore();
+const editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+const deleteAssetBool = computed(() => store.state.deleteAsset);
+const addAssetBool = computed(() => store.state.newAsset);
+
+const darkMode = ref(true);
+const item = ref({});
+const customer = ref({});
+const configItems = ref([]);
+const customers = ref([]);
+
+const newAssetName = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newLocation = ref('');
+const newRemoteLocation = ref('');
+const newType = ref('');
+const newDescription = ref('');
+const newNotes = ref('');
+const newState = ref('');
+
+// get config item from id
+const getItemById = async () => {
+    if (!addAssetBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+            );
+            item.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update asset fields in the store
+const updateAsset = () => {
+    const asset = {
+        assetName: newAssetName.value,
+        customerId: newCustomerID.value,
+        customer: newCustomer.value,
+        location: newLocation.value,
+        remoteLocation: newRemoteLocation.value,
+        type: newType.value,
+        description: newDescription.value,
+        notes: newNotes.value,
+        state: newState.value
+    }; 
+    store.commit('updateAssetComponent', asset);
+}
+
+//update data
+const updateConfigItem = async () => {
+    if (item.value.assetName.trim() === "") {
+        alert("Please add a config item name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if config item name already exists
+        configItems.value.forEach(ci => {
+            if (ci.assetName === item.value.assetName) {
+                counter += 1;
+            }
+        });
+        if (counter == 1) {
+            alert("This asset name already exists. Please choose an unique asset name or modify respectively delete the old one!");
+            item.value.assetName = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+                {
+                    primaryID: item.value.primaryID,
+                    assetName: item.value.assetName,
+                    customerID: item.value.customerID,
+                    customer: item.value.customer,
+                    location: item.value.location,
+                    remoteLocation: item.value.remoteLocation,
+                    type: item.value.type,
+                    description: item.value.description,
+                    notes: item.value.notes,
+                    state: item.value.state,
+                    lastView: item.value.lastView,
+                    user: item.value.user,
+                    hardwareBool: item.value.hardwareBool,
+                    model: item.value.model,
+                    serialnumber: item.value.serialnumber,
+                    CPU: item.value.CPU,
+                    RAM: item.value.RAM,
+                    storageConfiguration: item.value.storageConfiguration,
+                    miscellaneous: item.value.miscellaneous,
+                    softwareBool: item.value.softwareBool,
+                    software: item.value.software,
+                    version: item.value.version,
+                    license: item.value.license,
+                    networkBool: item.value.networkBool,
+                    IPv4: item.value.IPv4,
+                    IPv6: item.value.IPv6,
+                    MAC: item.value.MAC,
+                    subnetmask: item.value.subnetmask,
+                }
+            )
+            await getItemById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//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 confirmDeleteAsset = async () => {
+    if (deleteAssetBool.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('changeToAssetlist');
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        } else {
+            store.commit('undoDeleteAsset');
+        }
+    }
+}
+
+//get all config items
+const getConfigItems = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
+        configItems.value = response.data;
+    } 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/${item.value.customer}`);
+        customer.value = response.data;
+        item.value.customerID = customer.value.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await updateConfigItem();
+}
+
+// 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);
+    }
+    updateAsset();
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(deleteAssetBool, confirmDeleteAsset);
+
+onMounted(() => {
+    getItemById();
+    getConfigItems();
+    triggerBackendCallsWithDelay(getCustomers);
+});
+
+</script>
+
+<script>
+export default {
+    name: "Asset",
+}
+</script>
+      
+      
+<style scoped>
+.information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    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;
+}
+
+
+.asset-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;
+}
+
+.asset-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;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.data-field#street-name {
+    width: 70%;
+}
+
+.data-field#street-no {
+    width: 30%;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
+.data {
+    display: flex;
+    overflow-x: auto;
+    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;
+}
+
+.data#notes,
+.data#description {
+    align-self: stretch;
+    /* width: 45%; */
+    scrollbar-width: none;
+    overflow-x: auto;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client-location,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.id-type,
+.remoteLocation-state {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.notes,
+.description {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+}
+
+.rectangle-container {
+    display: flex;
+    padding-top: 1rem;
+}
+
+.rectangle {
+    width: 6.25em;
+    height: 6.25em;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.rectangle-darkmode {
+    background-color: #212121;
+}
+
+.rectangle-lightmode {
+    background-color: #EBEBEB;
+}
+
+.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;
+}
+</style>

components/server/AssetSolutionList.vue

@@ -0,0 +1,175 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
+        <table class="data-table" id="solution-checkklist">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Solution', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
+                        Solution</th>
+                    <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode']">Type</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
+                        ...</td>
+                    <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
+
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "AssetSolutionList",
+};
+</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 {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.Solution {
+    width: 50%;
+}
+
+.Solution-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Solution-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 22%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 35%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 35%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/AssetTable.vue

@@ -0,0 +1,345 @@
+<template>
+    <section v-if="assetSearchable" :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']">
+    </section>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
+        <table class="data-table" id="asset-table">
+            <tbody>
+                <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="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr v-for="item in configItemList" :key="item.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ item.customer }}
+                    </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)">
+                            {{ item.assetName }}
+                        </nuxt-link>
+                    </td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        {{ item.type }}</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        {{ item.state }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ item.user }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+<script setup>
+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';
+
+// get accesss to the store
+const store = useStore()
+const goToChosenAsset = (id) => {
+    store.commit('setChosenAsset', id);
+    store.commit('changeToAsset');
+};
+const clientFilter = computed(() => store.state.filteredAssetbyClient);
+const assetSearchable = computed(() => store.state.assetSearchable);
+
+const assetSearchFilter = ref('');
+const darkMode = ref(true)
+const configItemList = ref([]);
+
+// update search term
+const updateSearchTerm = async () => {
+    assetSearchFilter.value = '';
+    await getConfigItems();
+}
+
+//get all config items
+const getConfigItems = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredConfigItemsByClient();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all config items based on the searched client
+const getFilteredConfigItemsByClient = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByClient/${clientFilter.value}`);
+        configItemList.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all config items based on the searched asset name
+const searchConfigItem = async () => {
+    if (assetSearchFilter.value === '') {
+        await getConfigItems();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByAsset/${assetSearchFilter.value}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+watch(clientFilter, getConfigItems);
+watch(assetSearchable, updateSearchTerm);
+
+onMounted(async () => {
+    await getConfigItems();
+});
+</script>
+
+<script>
+export default {
+    name: "AssetTable",
+};
+</script>    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    /* width: 100%; */
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.asset-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;
+}
+
+.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;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.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;
+}
+
+.Type {
+    width: 12.7%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.State {
+    width: 12.7%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 8%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.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;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+</style>

components/server/AssetTableNoClient.vue

@@ -0,0 +1,186 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
+        <table class="data-table" id="asset-table-no-client">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th :class="['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="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "AssetTableNoClient",
+};
+</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;
+}
+
+.Type {
+    width: 20%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.State {
+    width: 20%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-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>

components/server/Client.vue

@@ -0,0 +1,219 @@
+<template>
+  <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <h2 :class="['client-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Client name</h2>
+    <div class="data-field" id="client-id">
+      <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+    </div>
+    <div class="client-data">
+      <div class="contact">
+        <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</h3>
+        <div class="data-field" id="contact-person">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="e-mail">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="phone">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone number:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+      </div>
+      <div class="address">
+        <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</h3>
+        <div class="street-address">
+          <div class="data-field" id="street-name">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+          </div>
+          <div class="data-field" id="street-no">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">No.:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+          </div>
+        </div>
+        <div class="data-field" id="postal-code">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="city">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+      </div>
+    </div>
+    <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>
+  </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "Client",
+};
+</script>   
+    
+    
+<style scoped>
+.information {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  padding: 1.25rem 1.875rem;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+
+.client-name {
+  align-self: stretch;
+  padding: 1.25rem 0;
+  letter-spacing: 5%;
+  text-decoration-line: underline;
+  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
+}
+
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 0 1.875rem;
+  gap: 1.25rem;
+  border-radius: 0.625rem;
+}
+
+.data-field#client-id {
+  padding: 0.625rem 1.875rem;
+}
+
+.data-field#street-name {
+  width: 70%;
+}
+
+.data-field#street-no {
+  width: 30%;
+}
+
+.label {
+  letter-spacing: 5%;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0 0.625rem;
+  border-radius: 0.3125rem;
+  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+  background-color: #212121;
+  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;
+}
+
+.data#notes {
+  align-self: stretch;
+}
+
+.client-data {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  padding: 0 0.625rem;
+}
+
+.contact,
+.address {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  line-height: normal;
+  width: 50%;
+  padding: 1.25rem 0.625rem;
+  border-radius: 0.3125rem;
+}
+
+.area-title {
+  letter-spacing: 5%;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+
+.street-address {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  align-self: stretch;
+  padding: 0 1.875rem 0 0;
+  gap: 0.625rem;
+}
+
+.notes {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+}</style>

components/server/ClientQuickAccess.vue

@@ -0,0 +1,98 @@
+<template>
+  <section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Quick Access</h2>
+    <div class="shortcuts">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits" value="Maintenance Visits">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders" value="Production Orders">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Assets">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="Solutions">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Issue Slips">
+    </div>
+  </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "Asset",
+};
+</script>    
+    
+    
+<style scoped>
+.quick-access {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 1.875rem 1.875rem 3.125rem;
+  gap: 1.25rem;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #fff;
+}
+
+
+.heading {
+  letter-spacing: 5%;
+  text-decoration-line: underline;
+  font: 400 1rem/2rem Overpass, sans-serif;
+}
+
+.heading-darkmode {
+  color: #fff;
+}
+
+.heading-lightmode {
+  color: #000;
+}
+
+.shortcuts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-content: center;
+  padding: 0.625rem 1.875rem;
+  gap: 2.5rem;
+}
+
+input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 15rem;
+  height: 4rem;
+  border-radius: 0.625rem;
+  padding: 0.9375rem 1.25rem;
+  border: none;
+  text-align: center;
+  letter-spacing: 5%;
+  font: 400 0.875rem/2rem Overpass, sans-serif;
+}
+
+.input-darkmode {
+  color: #fff;
+  background-color: #343434;
+}
+
+.input-lightmode {
+  color: #000;
+  background-color: #E4E4E4;
+}
+</style>

components/server/ClientTable.vue

@@ -0,0 +1,134 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <table class="data-table" id="client-table">
+            <tbody>
+                <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="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</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="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        ...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "ClientTable",
+};
+</script>
+  
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.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: 40%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Name {
+    width: 60%;
+}</style>

components/server/HardwareSpecifications.vue

@@ -0,0 +1,346 @@
+<template>
+    <section v-if="hardwareBoolean && !addAssetBool"
+        :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">
+                <div class="data-field" id="model">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.model }}</pre>
+                    <input v-if="editable" v-model="item.model" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="CPU">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.CPU }}</pre>
+                    <input v-if="editable" v-model="item.CPU" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="serial-number-RAM">
+                <div class="data-field" id="serial-number">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.serialnumber }}</pre>
+                    <input v-if="editable" v-model="item.serialnumber" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="RAM">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.RAM }}</pre>
+                    <input v-if="editable" v-model="item.RAM" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+        <div class="asset-data">
+            <div class="additional">
+                <div class="storage-configuration">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
+                    <input v-model="item.storageConfiguration" :readonly="!editable" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="storage-configuration">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="miscellaneous">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
+                    <input v-model="item.miscellaneous" :readonly="!editable" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addAssetBool" :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">
+                <div class="data-field" id="model">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
+                    <input v-model="newModel" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="CPU">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
+                    <input v-model="newCPU" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="serial-number-RAM">
+                <div class="data-field" id="serial-number">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
+                    <input v-model="newSerialnumber" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="RAM">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
+                    <input v-model="newRAM" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+        <div class="asset-data">
+            <div class="additional">
+                <div class="storage-configuration">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
+                    <input v-model="newStorageConfiguration" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="storage-configuration">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="miscellaneous">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
+                    <input v-model="newMiscellaneous" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+
+<script setup>
+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 editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+const addAssetBool = computed(() => store.state.newAsset);
+
+const newHardwareBool = ref(true);
+const newModel = ref('');
+const newSerialnumber = ref('');
+const newCPU = ref('');
+const newRAM = ref('');
+const newStorageConfiguration = ref('');
+const newMiscellaneous = ref('');
+
+const darkMode = ref(true)
+const item = ref({});
+const hardwareBoolean = ref(false)
+
+// get config item from id
+const getItemById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+        );
+        item.value = response.data;
+        if (item.value.hardwareBool == 1) {
+            hardwareBoolean.value = true;
+        };
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update hardware fields in the store
+const updateAsset = () => {
+    if (newModel.value.length === 0 && newSerialnumber.value.length === 0 && newCPU.value.length === 0 && newRAM.value.length === 0 && newStorageConfiguration.value.length === 0 && newMiscellaneous.value.length === 0) {
+        newHardwareBool.value = false
+    }
+    const asset = {
+        hardwareBool: newHardwareBool.value,
+        model: newModel.value,
+        serialnumber: newSerialnumber.value,
+        CPU: newCPU.value,
+        RAM: newRAM.value,
+        storageConfig: newStorageConfiguration.value,
+        miscellaneous: newMiscellaneous.value,
+    }; 
+    store.commit('updateHardwareComponent', asset);
+}
+
+//update data
+const updateConfigItem = async () => {
+    if (item.value.model.length === 0 && item.value.serialnumber.length === 0 && item.value.CPU.length === 0 && item.value.RAM.length === 0 && item.value.storageConfiguration.length === 0 && item.value.miscellaneous.length === 0) {
+        item.value.hardwareBool = 0;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+            {
+                primaryID: item.value.primaryID,
+                assetName: item.value.assetName,
+                customerID: item.value.customerID,
+                customer: item.value.customer,
+                location: item.value.location,
+                remoteLocation: item.value.remoteLocation,
+                type: item.value.type,
+                description: item.value.description,
+                notes: item.value.notes,
+                state: item.value.state,
+                lastView: item.value.lastView,
+                user: item.value.user,
+                hardwareBool: item.value.hardwareBool,
+                model: item.value.model,
+                serialnumber: item.value.serialnumber,
+                CPU: item.value.CPU,
+                RAM: item.value.RAM,
+                storageConfiguration: item.value.storageConfiguration,
+                miscellaneous: item.value.miscellaneous,
+                softwareBool: item.value.softwareBool,
+                software: item.value.software,
+                version: item.value.version,
+                license: item.value.license,
+                networkBool: item.value.networkBool,
+                IPv4: item.value.IPv4,
+                IPv6: item.value.IPv6,
+                MAC: item.value.MAC,
+                subnetmask: item.value.subnetmask,
+            }
+        );
+        await getItemById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getItemById();
+});
+</script>
+
+<script>
+export default {
+    name: "HardwareSpecifications",
+};
+</script>   
+
+      
+<style scoped>
+.hardware-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    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;
+}
+
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.div-darkmode,
+.h3-darkmode {
+    color: #fff;
+}
+
+.div-lightmode,
+.h3-lightmode {
+    color: #000;
+}
+
+.label#hardware {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.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;
+}
+
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.data#miscellaneous,
+.data#storage-configuration {
+    align-self: stretch;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.model-CPU,
+.serial-number-RAM {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+
+.storage-configuration,
+.miscellaneous {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+}
+</style>

components/server/InstanceChecklist.vue

@@ -0,0 +1,214 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="instance-checklist">
+            <tbody>
+                <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>
+                    <th
+                        :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        Task</th>
+                    <th
+                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        Comments</th>
+                    <th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        ...</td>
+                    <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                            :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "InstanceChecklist",
+};
+</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 {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.checkbox-darkmode {
+    filter: invert(100%);
+}
+
+
+.checkbox-lightmode {
+    filter: invert(0%);
+}
+
+.Step {
+    width: 7%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 28%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 30%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 30%;
+}
+
+.Comments-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Comments-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Done {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/Issue.vue

@@ -0,0 +1,209 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['issue-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
+        <div class="issue-data">
+            <div class="type">
+                <div class="data-field" id="type">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="state-amount">
+                    <div class="data-field" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="data-field" id="amount">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="issue-data">
+            <div class="additional">
+                <div class="properties">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "Issue",
+};
+</script>   
+      
+      
+      
+<style scoped>
+.information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+
+
+.issue-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.data-field#street-name {
+    width: 70%;
+}
+
+.data-field#street-no {
+    width: 30%;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.issue-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.type,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.state-amount {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.data#properties {
+    align-self: stretch;
+}
+
+.properties {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/IssueSlip.vue

@@ -0,0 +1,209 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['issueSlip-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">ID issue slips</h2>
+        <div class="issueSlip-data">
+            <div class="client">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="ticketNo-user">
+                    <div class="data-field" id="ticketNo">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="data-field" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="issueSlip-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "IssueSlip",
+};
+</script>   
+      
+      
+      
+<style scoped>
+.information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+
+
+.issueSlip-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.data-field#street-name {
+    width: 70%;
+}
+
+.data-field#street-no {
+    width: 30%;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.issueSlip-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.ticketNo-user {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.data#notes {
+    align-self: stretch;
+}
+
+.notes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/IssueSlipTable.vue

@@ -0,0 +1,221 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
+        <table class="data-table" id="asset-table">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        Client</th>
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID
+                    </th>
+                    <th
+                        :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        Ticket No.</th>
+                    <th
+                        :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        Creation Date</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr v-for="issueSlip in issueSlips" :key="issueSlip.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ issueSlip.customer }}</td>
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        {{ issueSlip.primaryID }}</td>
+                    <td
+                        :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        {{ issueSlip.ticketNo }}</td>
+                    <td
+                        :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        {{ issueSlip.creationDate }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ issueSlip.user }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+
+const darkMode = ref(true)
+const issueSlips = ref([]);
+
+//get all issueSlips
+const getIssueSlips = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssueSlips`);
+        issueSlips.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getIssueSlips();
+});
+</script>
+
+<script>
+export default {
+    name: "IssueSlipTable",
+};
+</script>
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Client {
+    width: 31.6%;
+}
+
+.Client-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Client-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID {
+    width: 31.6%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.TicketNo {
+    width: 15.8%;
+}
+
+.TicketNo-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.TicketNo-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CreationDate {
+    width: 15.8%;
+}
+
+.CreationDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CreationDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}</style>

components/server/IssueSlipTableNoClient.vue

@@ -0,0 +1,187 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
+        <table class="data-table" id="asset-table">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID
+                    </th>
+                    <th
+                        :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        Ticket No.</th>
+                    <th
+                        :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        Creation Date</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "IssueSlipTableNoClient",
+};
+</script>  
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.ID {
+    width: 47.5%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.TicketNo {
+    width: 23.75%;
+}
+
+.TicketNo-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.TicketNo-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CreationDate {
+    width: 23.75%;
+}
+
+.CreationDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CreationDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}</style>

components/server/IssueTable.vue

@@ -0,0 +1,205 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div>
+        <table class="data-table" id="asset-table">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</th>
+                </tr>
+                <tr v-for="issue in issues" :key="issue.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        {{ issue.name }}</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        {{ issue.type }}</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        {{ issue.state }}</td>
+                    <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ issue.amount }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+
+const darkMode = ref(true)
+const issues = ref([]);
+
+//get all issue
+const getIssues = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssues`);
+        issues.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getIssues();
+});
+</script>
+
+<script>
+export default {
+    name: "IssueTable",
+};
+</script>  
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Name {
+    width: 33.3%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 33.3%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.State {
+    width: 22.2%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Amount {
+    width: 11.1%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/IssueVariant.vue

@@ -0,0 +1,213 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['issue-variant-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
+        <div class="issue-variant-data">
+            <div class="variantOf">
+                <div class="data-field" id="variantOf">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Variant of:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="state-amount-price">
+                    <div class="data-field" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="data-field" id="amount">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="data-field" id="price">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Price:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="issue-variant-data">
+            <div class="additional">
+                <div class="properties">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "IssueVariant",
+};
+</script>   
+      
+      
+      
+<style scoped>
+.information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+
+
+.issue-variant-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.data-field#street-name {
+    width: 70%;
+}
+
+.data-field#street-no {
+    width: 30%;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.issue-variant-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.variantOf,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.state-amount-price {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.data#properties {
+    align-self: stretch;
+}
+
+.properties {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/IssueVariants.vue

@@ -0,0 +1,204 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
+        <table class="data-table" id="issue-variants-table">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                        Properties</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th
+                        :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                        Amount</th>
+                    <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                        ...</td>
+                    <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "IssueVariants",
+};
+</script>   
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Properties {
+    width: 30%;
+}
+
+.Properties-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Properties-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Name {
+    width: 30%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.State {
+    width: 15%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Amount {
+    width: 15%;
+}
+
+.Amount-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Amount-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Price {
+    width: 10%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/MaintenanceVisitsInstance.vue

@@ -0,0 +1,243 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['maintenance-visits-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+        <div class="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="templateId-client-type" 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-type" id="client">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="templateId-client-type" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <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="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="maintenanceType-state-user" id="maintenanceType">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Maintenance type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="maintenanceType-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="maintenanceType-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="maintenance-visits-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 setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "MaintenanceVisitsInstance",
+};
+</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;
+}
+
+
+
+.maintenance-visits-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;
+}
+
+.maintenanceType-state-user,
+.creationDate-completionDate-timeSpent,
+.templateId-client-type {
+    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;
+}
+
+.maintenance-visits-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;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.data#templateNotes,
+.data#notes {
+    align-self: stretch;
+}
+
+.notes,
+.templateNotes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/MaintenanceVisitsInstanceTable.vue

@@ -0,0 +1,224 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
+        <table class="data-table" name="maintenance-visits-instance-table">
+            <tbody>
+                <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="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
+                        Maintenance type</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="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-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>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "MaintenanceVisitsInstanceTable",
+};
+</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%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.MaintenanceType {
+    width: 15%;
+}
+
+.MaintenanceType-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.MaintenanceType-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+
+.State {
+    width: 15%;
+}
+
+.State-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CreationDate {
+    width: 22.5%;
+}
+
+.CreationDate-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.CreationDate-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.CompletionDate {
+    width: 22.5%;
+}
+
+.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>

components/server/MaintenanceVisitsTemplate.vue

@@ -0,0 +1,214 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['maintenance-visits-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
+        <div class="maintenance-visits-template-data">
+            <div class="client-ID-type-user">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="id-type-user" id="ID">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="id-type-user" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="id-type-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>
+        </div>
+        <div class="maintenance-visits-template-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 setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "MaintenanceVisitsTemplate",
+};
+</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;
+}
+
+
+
+.maintenance-visits-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;
+}
+
+.id-type-user {
+    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;
+}
+
+.maintenance-visits-template-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client-ID-type-user,
+.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;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.type-user {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.data#notes {
+    align-self: stretch;
+}
+
+.notes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/MaintenanceVisitsTemplateTable.vue

@@ -0,0 +1,223 @@
+<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="maintenance-visits-template-table">
+            <tbody>
+                <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="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr v-for="template in maintenanceVisitTemplates" :key="template.checklistID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ template.customer }}</td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        {{ template.name }}</td>
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        {{ template.checklistID }}</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        {{ template.type }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ template.user }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+
+const darkMode = ref(true)
+const maintenanceVisitTemplates = ref([]);
+
+//get all maintenance visit templates
+const getMaintenanceVisitTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
+        maintenanceVisitTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getMaintenanceVisitTemplates();
+});
+</script>
+
+<script>
+export default {
+    name: "MaintenanceVisitsTemplateTable",
+};
+</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: 11.1%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 11.1%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-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>

components/server/MaintenanceVisitsTemplateTableNoClient.vue

@@ -0,0 +1,187 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
+        <table class="data-table" id="maintenance-visits-templat-table-no-client">
+            <tbody>
+                <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="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</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="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "MaintenanceVisitsTemplateTableNoClient",
+};
+</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: 22.5%;
+}
+
+.ID-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 22.5%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}</style>

components/server/NetworkSpecifications.vue

@@ -0,0 +1,500 @@
+<template>
+    <section v-if="networkBoolean && !addAssetBool"
+        :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">
+                <div class="data-field" id="IPv4">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv4 }}</pre>
+                    <input v-if="editable" v-model="inputIPv4" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="MAC">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.MAC }}</pre>
+                    <input v-if="editable" v-model="item.MAC" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="IPv6-subnetmask">
+                <div class="data-field" id="IPv6">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv6 }}</pre>
+                    <input v-if="editable" v-model="inputIPv6" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="subnetmask">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.subnetmask }}</pre>
+                    <input v-if="editable" v-model="item.subnetmask" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addAssetBool" :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">
+                <div class="data-field" id="IPv4">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
+                    <input v-model="newIPv4" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="MAC">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</pre>
+                    <input v-model="newMAC" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="IPv6-subnetmask">
+                <div class="data-field" id="IPv6">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
+                    <input v-model="newIPv6" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="subnetmask">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</pre>
+                    <input v-model="newSubnetmask" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addAssetBool" id="saveNewItem">
+        <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Safe</button>
+    </section>
+</template>
+    
+
+<script setup>
+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 editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+const addAssetBool = computed(() => store.state.newAsset);
+const newAssetName = computed(() => store.state.newAssetName);
+const newCustomerID = computed(() => store.state.newCustomerID);
+const newCustomer = computed(() => store.state.newCustomer);
+const newLocation = computed(() => store.state.newLocation);
+const newRemoteLocation = computed(() => store.state.newRemoteLocation);
+const newType = computed(() => store.state.newType);
+const newDescription = computed(() => store.state.newDescription);
+const newNotes = computed(() => store.state.newNotes);
+const newState = computed(() => store.state.newState);
+const newLastView = computed(() => store.state.newLastView);
+const newUser = computed(() => store.state.newUser);
+const hardwareBool = computed(() => store.state.hardwareBool);
+const newModel = computed(() => store.state.newModel);
+const newSerialnumber = computed(() => store.state.newSerialnumber);
+const newCPU = computed(() => store.state.newCPU);
+const newRAM = computed(() => store.state.newRAM);
+const newStorageConfiguration = computed(() => store.state.newStorageConfiguration);
+const newMiscellaneous = computed(() => store.state.newMiscellaneous);
+const softwareBool = computed(() => store.state.softwareBool);
+const newSoftware = computed(() => store.state.newSoftware);
+const newVersion = computed(() => store.state.newVersion);
+const newLicense = computed(() => store.state.newLicense);
+
+const darkMode = ref(true)
+const item = ref({});
+const networkBoolean = ref(false);
+const inputIPv4 = ref('');
+const inputIPv6 = ref('');
+const newNetworkBool = ref(true);
+const newIPv4 = ref('');
+const newIPv6 = ref('');
+const newMAC = ref('');
+const newSubnetmask = ref('');
+const configItems = ref([]);
+
+// get config item from id
+const getItemById = async () => {
+    if (!addAssetBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+            );
+            item.value = response.data;
+            if (item.value.networkBool == 1) {
+                networkBoolean.value = true;
+            };
+            if (item.value.IPv4 == null) {
+                inputIPv4.value = "";
+            } else {
+                inputIPv4.value = item.value.IPv4;
+            }
+            if (item.value.IPv6 == null) {
+                inputIPv6.value = "";
+            } else {
+                inputIPv6.value = item.value.IPv6;
+            }
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// helper function to validate an IPv4 address
+const validateIPv4address = (ipaddress) => {
+    const ipv4format = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    if (ipv4format.test(ipaddress) || ipaddress === "") {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+// helper function to validate an IPv4 address
+const validateIPv6address = (ipaddress) => {
+    const ipv6format = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/gi;
+    if (ipv6format.test(ipaddress) || ipaddress === "") {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+//update data
+const updateConfigItem = async () => {
+    if (inputIPv4.value.length === 0 && inputIPv6.value.length === 0 && item.value.MAC.length === 0 && item.value.subnetmask.length === 0) {
+        item.value.networkBool = 0;
+    }
+    if (validateIPv4address(inputIPv4.value)) {
+        item.value.IPv4 = inputIPv4.value;
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+                {
+                    primaryID: item.value.primaryID,
+                    assetName: item.value.assetName,
+                    customerID: item.value.customerID,
+                    customer: item.value.customer,
+                    location: item.value.location,
+                    remoteLocation: item.value.remoteLocation,
+                    type: item.value.type,
+                    description: item.value.description,
+                    notes: item.value.notes,
+                    state: item.value.state,
+                    lastView: item.value.lastView,
+                    user: item.value.user,
+                    hardwareBool: item.value.hardwareBool,
+                    model: item.value.model,
+                    serialnumber: item.value.serialnumber,
+                    CPU: item.value.CPU,
+                    RAM: item.value.RAM,
+                    storageConfiguration: item.value.storageConfiguration,
+                    miscellaneous: item.value.miscellaneous,
+                    softwareBool: item.value.softwareBool,
+                    software: item.value.software,
+                    version: item.value.version,
+                    license: item.value.license,
+                    networkBool: item.value.networkBool,
+                    IPv4: item.value.IPv4,
+                    IPv6: item.value.IPv6,
+                    MAC: item.value.MAC,
+                    subnetmask: item.value.subnetmask,
+                }
+            );
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        if (item.value.IPv4 == null) {
+            inputIPv4.value = "";
+        } else {
+            inputIPv4.value = item.value.IPv4;
+        }
+        alert("You have entered an invalid IPv4 address, please choose a valid one!");
+    }
+    if (validateIPv6address(inputIPv6.value)) {
+        item.value.IPv6 = inputIPv6.value;
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+                {
+                    primaryID: item.value.primaryID,
+                    assetName: item.value.assetName,
+                    customerID: item.value.customerID,
+                    customer: item.value.customer,
+                    location: item.value.location,
+                    remoteLocation: item.value.remoteLocation,
+                    type: item.value.type,
+                    description: item.value.description,
+                    notes: item.value.notes,
+                    state: item.value.state,
+                    lastView: item.value.lastView,
+                    user: item.value.user,
+                    hardwareBool: item.value.hardwareBool,
+                    model: item.value.model,
+                    serialnumber: item.value.serialnumber,
+                    CPU: item.value.CPU,
+                    RAM: item.value.RAM,
+                    storageConfiguration: item.value.storageConfiguration,
+                    miscellaneous: item.value.miscellaneous,
+                    softwareBool: item.value.softwareBool,
+                    software: item.value.software,
+                    version: item.value.version,
+                    license: item.value.license,
+                    networkBool: item.value.networkBool,
+                    IPv4: item.value.IPv4,
+                    IPv6: item.value.IPv6,
+                    MAC: item.value.MAC,
+                    subnetmask: item.value.subnetmask,
+                }
+            );
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        if (item.value.IPv6 == null) {
+            inputIPv6.value = "";
+        } else {
+            inputIPv6.value = item.value.IPv6;
+        }
+        alert("You have entered an invalid IPv6 address, please choose a valid one!");
+    }
+    await getItemById();
+}
+
+// add new config item
+const addItem = async () => {
+    if (newIPv4.value.length === 0 && newIPv6.value.length === 0 && newMAC.value.length === 0 && newSubnetmask.value.length === 0) {
+        newNetworkBool.value = false;
+    }
+    // check if all input data is valid
+    if (newAssetName.value.trim() === "") {
+        alert("Please add a config item name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if config item name already exists
+        configItems.value.forEach(ci => {
+            if (ci.assetName === newAssetName.value) {
+                counter += 1;
+            }
+        });
+        if (counter == 1) {
+            alert("This asset name already exists. Please choose an unique asset name or modify respectively delete the old one!");
+            return;
+        }
+    }
+    if (newCustomer.value.length === 0) {
+        alert("Please choose a client!");
+        return;
+    }
+    if (!validateIPv4address(newIPv4.value)) {
+        alert("Please enter a valid IPv4 address or leave this field empty!");
+        return;
+    }
+    if (!validateIPv6address(newIPv6.value)) {
+        alert("Please enter a valid IPv6 address or leave this field empty!");
+        return;
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addConfigItem`,
+            {
+                assetName: newAssetName.value,
+                customerID: newCustomerID.value,
+                customer: newCustomer.value,
+                location: newLocation.value,
+                remoteLocation: newRemoteLocation.value,
+                type: newType.value,
+                description: newDescription.value,
+                notes: newNotes.value,
+                state: newState.value,
+                lastView: newLastView.value,
+                user: newUser.value,
+                hardwareBool: hardwareBool.value,
+                model: newModel.value,
+                serialnumber: newSerialnumber.value,
+                CPU: newCPU.value,
+                RAM: newRAM.value,
+                storageConfiguration: newStorageConfiguration.value,
+                miscellaneous: newMiscellaneous.value,
+                softwareBool: softwareBool.value,
+                software: newSoftware.value,
+                version: newVersion.value,
+                license: newLicense.value,
+                networkBool: newNetworkBool.value,
+                IPv4: newIPv4.value,
+                IPv6: newIPv6.value,
+                MAC: newMAC.value,
+                subnetmask: newSubnetmask.value,
+            });
+        store.commit('resetAssetStore');
+        store.commit('changeToAssetlist');
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all config items
+const getConfigItems = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
+        configItems.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(getItemById);
+    triggerBackendCallsWithDelay(getConfigItems);
+});
+</script>
+
+<script>
+export default {
+    name: "NetworkSpecifications",
+};
+</script>          
+      
+      
+<style scoped>
+.network-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    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;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.div-darkmode {
+    color: #fff;
+}
+
+.div-lightmode {
+    color: #000;
+}
+
+.label#network {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.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;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.IPv4-MAC,
+.IPv6-subnetmask {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.saveNewItem-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);
+}
+
+.saveNewItem-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);
+}
+
+.saveNewItem-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewItem-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewItem {
+    text-align: center;
+}
+
+.input {
+    border: none;
+}
+</style>

components/server/OrderingInformation.vue

@@ -0,0 +1,198 @@
+<template>
+    <section :class="['ordering-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information:
+            <div class="asset-data">
+                <table class="data-table" id="asset-table-no-client">
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                                Article</th>
+                            <th
+                                :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                                Amount</th>
+                            <th
+                                :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                                Price</th>
+                            <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                                ...</td>
+                            <td
+                                :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                                ...</td>
+                            <td
+                                :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "OrderingInformation",
+};
+</script>
+      
+      
+      
+<style scoped>
+.ordering-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 1rem/1.875rem Overpass, sans-serif;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.label#ordering {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    padding-left: 0.625rem;
+    padding-top: 1rem;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+
+.Article {
+    width: 30%;
+}
+
+.Article-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Article-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Amount {
+    width: 15%;
+}
+
+.Amount-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Amount-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Price {
+    width: 15%;
+}
+
+.Price-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Price-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 50%;
+}
+</style>

components/server/ProductionOrdersInstance.vue

@@ -0,0 +1,288 @@
+<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 setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "ProductionOrdersInstance",
+};
+</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>

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">
+            <tbody>
+                <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>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "ProductionOrdersInstanceTable",
+};
+</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>

components/server/ProductionOrdersTemplate.vue

@@ -0,0 +1,205 @@
+<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 setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "ProductionOrdersTemplate",
+};
+</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>

components/server/ProductionOrdersTemplateTable.vue

@@ -0,0 +1,204 @@
+<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">
+            <tbody>
+                <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 v-for="template in productionOrderTemplates" :key="template.templateID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ template.customer }}</td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        {{ template.name }}</td>
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        {{ template.templateID }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ template.user }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+
+const darkMode = ref(true)
+const productionOrderTemplates = ref([]);
+
+//get all productionOrder 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);
+    }
+}
+
+onMounted(() => {
+    getProductionOrderTemplates();
+});
+</script>
+
+<script>
+export default {
+    name: "ProductionOrdersTemplateTable",
+};
+</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>

components/server/ProductionOrdersTemplateTableNoClient.vue

@@ -0,0 +1,168 @@
+<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">
+            <tbody>
+                <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>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "ProductionOrdersTemplateTableNoClient",
+};
+</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>

components/server/SoftwareSpecifications.vue

@@ -0,0 +1,348 @@
+<template>
+    <section v-if="softwareBoolean && !addAssetBool"
+        :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">
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                Software</th>
+                            <th
+                                :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                Version</th>
+                            <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
+                        </tr>
+                        <tr v-if="editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                <input type="text" v-model="item.software" @change="updateConfigItem()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td
+                                :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                <input type="text" v-model="item.version" @change="updateConfigItem()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="item.license" @change="updateConfigItem()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr v-if="!editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                {{ item.software }}</td>
+                            <td
+                                :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                {{ item.version }}</td>
+                            <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ item.license }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+    <section v-if="addAssetBool" :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">
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                Software</th>
+                            <th
+                                :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                Version</th>
+                            <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                <input type="text" v-model="newSoftware" @change="updateAsset()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td
+                                :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                <input type="text" v-model="newVersion" @change="updateAsset()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newLicense" @change="updateAsset()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+</template>
+    
+<script setup>
+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 editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+const addAssetBool = computed(() => store.state.newAsset);
+
+const newSoftwareBool = ref(true);
+const newSoftware = ref('');
+const newVersion = ref('');
+const newLicense = ref('');
+
+const darkMode = ref(true)
+const item = ref({});
+const softwareBoolean = ref(false)
+
+// get config item from id
+const getItemById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+        );
+        item.value = response.data;
+        if (item.value.softwareBool == 1) {
+            softwareBoolean.value = true;
+        };
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update software fields in the store
+const updateAsset = () => {
+    if (newSoftware.value.length == 0 && newLicense.value.length == 0 && newVersion.value.length == 0) {
+        newSoftwareBool.value = false
+    }
+    const asset = {
+        softwareBool: newSoftwareBool.value,
+        software: newSoftware.value,
+        version: newVersion.value,
+        license: newLicense.value,
+    };
+    store.commit('updateSoftwareComponent', asset);
+}
+
+//update data
+const updateConfigItem = async () => {
+    if (item.value.license.length === 0 && item.value.version.length === 0 && item.value.software.length === 0) {
+        item.value.softwareBool = 0;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+            {
+                primaryID: item.value.primaryID,
+                assetName: item.value.assetName,
+                customerID: item.value.customerID,
+                customer: item.value.customer,
+                location: item.value.location,
+                remoteLocation: item.value.remoteLocation,
+                type: item.value.type,
+                description: item.value.description,
+                notes: item.value.notes,
+                state: item.value.state,
+                lastView: item.value.lastView,
+                user: item.value.user,
+                hardwareBool: item.value.hardwareBool,
+                model: item.value.model,
+                serialnumber: item.value.serialnumber,
+                CPU: item.value.CPU,
+                RAM: item.value.RAM,
+                storageConfiguration: item.value.storageConfiguration,
+                miscellaneous: item.value.miscellaneous,
+                softwareBool: item.value.softwareBool,
+                software: item.value.software,
+                version: item.value.version,
+                license: item.value.license,
+                networkBool: item.value.networkBool,
+                IPv4: item.value.IPv4,
+                IPv6: item.value.IPv6,
+                MAC: item.value.MAC,
+                subnetmask: item.value.subnetmask,
+            }
+        );
+        await getItemById();
+    } catch (err) {
+        console.log(err);
+    }
+}
+
+onMounted(() => {
+    getItemById();
+});
+</script>
+
+<script>
+export default {
+    name: "SoftwareSpecifications",
+};
+</script>      
+      
+      
+<style scoped>
+.software-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.label#software {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    padding-left: 0.625rem;
+    padding-top: 1rem;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+
+.Software {
+    width: 50%;
+}
+
+.Software-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Software-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Version {
+    width: 25%;
+}
+
+.Version-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Version-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.License {
+    width: 25%;
+}
+
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    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;
+}
+</style>

components/server/Solution.vue

@@ -0,0 +1,235 @@
+<template>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Solution name</h2>
+        <div class="solution-data">
+            <div class="client-asset">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="data-field" id="asset">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="data-field" id="user">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                </div>
+                <div class="type-state">
+                    <div class="data-field" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="data-field" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="solution-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
+                        problem/intended use:</h3>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
+                </div>
+            </div>
+        </div>
+        <div class="solution-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 setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "Solution",
+};
+</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;
+}
+
+
+
+.solution-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.data-field#street-name {
+    width: 70%;
+}
+
+.data-field#street-no {
+    width: 30%;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.solution-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.client-asset,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 100%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.type-state {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.data#notes,
+.data#description {
+    align-self: stretch;
+}
+
+.description {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+}
+
+.notes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+    padding-top: 0rem;
+}
+</style>

components/server/SolutionChecklist.vue

@@ -0,0 +1,186 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="solution-checkklist">
+            <tbody>
+                <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>
+                    <th
+                        :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        Task</th>
+                    <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        ...</td>
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "SolutionChecklist",
+};
+</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 {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.Step {
+    width: 8%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 22%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 35%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 35%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/SolutionTable.vue

@@ -0,0 +1,222 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
+        <table class="data-table" id="solution-table">
+            <tbody>
+                <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="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr v-for="sol in solutions" :key="sol.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ sol.customer }}</td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        {{ sol.solutionName }}</td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        {{ sol.assetName }}</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        {{ sol.type }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ sol.user }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+
+const darkMode = ref(true)
+const solutions = ref([]);
+
+//get all solutions
+const getSolutions = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
+        solutions.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getSolutions();
+});
+</script>
+
+<script>
+export default {
+    name: "SolutionTable",
+};
+</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;
+}
+
+.Asset {
+    width: 12.7%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 12.7%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.User {
+    width: 8%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/SolutionTableNoClient.vue

@@ -0,0 +1,186 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
+        <table class="data-table" id="solution-table">
+            <tbody>
+                <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="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</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="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "SolutionTableNoClient",
+};
+</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 {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.Name {
+    width: 45%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 22.5%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 22.5%;
+}
+
+.Type-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type-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>

components/server/TemplateChecklist.vue

@@ -0,0 +1,186 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="template-checkklist">
+            <tbody>
+                <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>
+                    <th
+                        :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        Task</th>
+                    <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        ...</td>
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "TemplateChecklist",
+};
+</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 {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.Step {
+    width: 8%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 22%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 35%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 35%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>

components/server/UserAccount.vue

@@ -0,0 +1,140 @@
+<template>
+    <section :class="['userAccount', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Account:</h2>
+        <div class="userData">
+            <div class="data-field" id="email">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
+                <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+            </div>
+            <div class="data-field" id="password">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Password:</pre>
+                <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">*******</pre>
+            </div>
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+  
+<script>
+export default {
+    name: "UserAccount",
+};
+</script> 
+    
+    
+<style scoped>
+.userAccount {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+    gap: 0.625rem;
+    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;
+}
+
+.heading {
+    letter-spacing: 5%;
+    font: 400 1rem/2rem Overpass, sans-serif;
+}
+
+.heading-darkmode {
+    color: #fff;
+}
+
+.heading-lightmode {
+    color: #000;
+}
+
+.userData {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    gap: 0.625rem
+}
+
+.rectangle-container {
+    display: flex;
+}
+
+.rectangle {
+    width: 6.25em;
+    height: 6.25em;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.rectangle-darkmode {
+    background-color: #212121;
+}
+
+.rectangle-lightmode {
+    background-color: #EBEBEB;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    border-radius: 0.625rem;
+    gap: 1.25rem;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    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;
+    width: 12.5em;
+}
+
+.label {
+    width: 6.25rem;
+}
+</style>

components/server/UserAppearance.vue

@@ -0,0 +1,115 @@
+<template>
+    <section :class="['userAppearance', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div class="userData">
+            <div class="data-field" id="mode">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Mode:</pre>
+                <pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Lightmode</pre>
+                <Toggle v-model="darkMode" id="toggleAppearance" />
+                <pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Darkmode</pre>
+            </div>
+            <div class="data-field" id="language">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Language:</pre>
+                <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+            </div>
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+import Toggle from '@vueform/toggle'
+
+const darkMode = ref(true)
+</script>
+  
+<script>
+export default {
+    name: "UserAppearance",
+};
+</script> 
+    
+<style src="@vueform/toggle/themes/default.css"></style>   
+    
+<style scoped>
+.userAppearance {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+    gap: 0.625rem;
+    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;
+}
+
+
+.userData {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    gap: 0.625rem
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    border-radius: 0.625rem;
+    gap: 1.25rem;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    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;
+    width: 15.625em;
+}
+
+.label {
+    width: 6.25rem;
+}
+
+.smallLabel {
+    font-size: 0.875em;
+}
+</style>

components/server/UserProfile.vue

@@ -0,0 +1,136 @@
+<template>
+    <section :class="['userProfile', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Profile:</h2>
+        <div class="userData">
+            <div class="rectangle-container">
+                <div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
+            </div>
+            <div class="data-field" id="username">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Username:</pre>
+                <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+            </div>
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+  
+<script>
+export default {
+    name: "UserProfile",
+};
+</script> 
+    
+    
+<style scoped>
+.userProfile {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+    gap: 1.25rem;
+    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;
+}
+
+.heading {
+    letter-spacing: 5%;
+    font: 400 1rem/2rem Overpass, sans-serif;
+}
+
+.heading-darkmode {
+    color: #fff;
+}
+
+.heading-lightmode {
+    color: #000;
+}
+
+.userData {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+    gap: 3.125rem
+}
+
+.rectangle-container {
+    display: flex;
+}
+
+.rectangle {
+    width: 6.25em;
+    height: 6.25em;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.rectangle-darkmode {
+    background-color: #212121;
+}
+
+.rectangle-lightmode {
+    background-color: #EBEBEB;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    border-radius: 0.625rem;
+    gap: 1.25rem;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    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;
+}
+</style>

components/server/UserRightsList.vue

@@ -0,0 +1,215 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Rights:</div>
+        <table class="data-table" id="user-rights-list">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
+                        User</th>
+                    <th
+                        :class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
+                        Admin</th>
+                    <th
+                        :class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
+                        Edit/Delete</th>
+                    <th
+                        :class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
+                        Create</th>
+                    <th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Admin', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
+                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
+                    </td>
+                    <td
+                        :class="['Edit-Delete', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
+                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
+                    </td>
+                    <td
+                        :class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
+                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
+                    </td>
+                    <td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                            :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "UserRightsList",
+};
+</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 {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.checkbox-darkmode {
+    filter: invert(100%);
+}
+
+
+.checkbox-lightmode {
+    filter: invert(0%);
+}
+
+.User {
+    width: 50%;
+}
+
+.User-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.User-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Admin {
+    width: 12.5%;
+}
+
+.Admin-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Admin-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Edit-Delete {
+    width: 12.5%;
+}
+
+.Edit-Delete-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Edit-Delete-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Create {
+    width: 12.5%;
+}
+
+.Create-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Create-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.View {
+    width: 12.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>

documentation/.$Datenbankmodell.drawio.bkp

@@ -1,6 +1,6 @@
-<mxfile host="Electron" modified="2023-11-07T10:35:56.822Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="kXWcrfMzl2STO6FMFR4O" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-02-01T15:29:10.628Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="R4sGFqNy6FSLZX5LoMO_" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="1200" dy="2931" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+    <mxGraphModel dx="246" dy="2876" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -338,7 +338,7 @@
           <mxGeometry y="300" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="-K6vikdffkJQkB35vOLp-1" value="users" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry y="-1570" width="150" height="570" as="geometry" />
+          <mxGeometry y="-1570" width="150" height="540" as="geometry" />
         </mxCell>
         <mxCell id="-K6vikdffkJQkB35vOLp-2" value="id" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="30" width="150" height="30" as="geometry" />
@@ -361,43 +361,40 @@
         <mxCell id="ioDwbpDVXUhE7vu6D29p-3" value="email" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="210" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-4" value="phonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="cJnZDgO8OQ7rvziumJ0x-1" value="phonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="240" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="cJnZDgO8OQ7rvziumJ0x-1" value="phonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-5" value="address" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="270" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-5" value="address" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-6" value="city" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="300" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-6" value="city" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-7" value="postcode" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="330" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-7" value="postcode" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-8" value="adminBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="360" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-8" value="adminBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-9" value="technician1Bool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="390" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-9" value="technician1Bool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-10" value="technician2Bool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="420" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-10" value="technician2Bool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-11" value="technicianMonitoringBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="450" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-11" value="technicianMonitoringBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-12" value="merchantBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="480" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-12" value="merchantBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
-          <mxGeometry y="510" width="150" height="30" as="geometry" />
-        </mxCell>
         <mxCell id="UjUgOsnL5tA5fsC7Xk2_-1" value="internBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
-          <mxGeometry y="540" width="150" height="30" as="geometry" />
+          <mxGeometry y="510" width="150" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-15" value="issueSlips" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="2040" y="-560" width="140" height="540" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-16" value="ID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-16" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-17" value="customerID" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
@@ -451,7 +448,7 @@
         <mxCell id="WukdXvazNq34soQIU5Al-40" value="orderingInfoIssueSlips" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="2220" y="-440" width="140" height="210" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-41" value="ID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-40" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-41" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-40" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-42" value="issueSlipID" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-40" vertex="1">
@@ -472,7 +469,7 @@
         <mxCell id="WukdXvazNq34soQIU5Al-48" value="issues" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="2040" y="120" width="140" height="210" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-49" value="ID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-48" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-49" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-48" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-50" value="name" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-48" vertex="1">
@@ -493,7 +490,7 @@
         <mxCell id="WukdXvazNq34soQIU5Al-56" value="issueVariants" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="2220" y="180" width="140" height="240" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-57" value="ID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-56" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-57" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-56" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-58" value="issueID" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-56" vertex="1">
@@ -517,7 +514,7 @@
         <mxCell id="WukdXvazNq34soQIU5Al-64" value="checklistSolutions" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="1610" y="-440" width="140" height="210" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-65" value="ID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-64" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-65" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-64" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-66" value="solutionID" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-64" vertex="1">
@@ -535,7 +532,7 @@
         <mxCell id="WukdXvazNq34soQIU5Al-70" value="comments" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-64" vertex="1">
           <mxGeometry y="180" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-93" value="masterProductionOrder:" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-93" value="masterProductionOrders:" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="920" y="-560" width="140" height="270" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-94" value="templateID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-93" vertex="1">
@@ -563,7 +560,7 @@
           <mxGeometry y="240" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-103" value="masterOrderTodos" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
-          <mxGeometry x="1090" y="-440" width="140" height="240" as="geometry" />
+          <mxGeometry x="1090" y="-440" width="140" height="210" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-104" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-103" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
@@ -583,10 +580,7 @@
         <mxCell id="WukdXvazNq34soQIU5Al-109" value="comment" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-103" vertex="1">
           <mxGeometry y="180" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-37" value="done" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="WukdXvazNq34soQIU5Al-103">
-          <mxGeometry y="210" width="140" height="30" as="geometry" />
-        </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-128" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-126" edge="1" target="DauqCNUrC7Z9yIe88X-r-22">
+        <mxCell id="WukdXvazNq34soQIU5Al-128" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-126" target="DauqCNUrC7Z9yIe88X-r-22" edge="1">
           <mxGeometry relative="1" as="geometry">
             <mxPoint x="450" y="-450" as="targetPoint" />
             <Array as="points">
@@ -627,7 +621,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="DauqCNUrC7Z9yIe88X-r-31">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="DauqCNUrC7Z9yIe88X-r-31" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="310" y="-1165" />
@@ -635,7 +629,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="DauqCNUrC7Z9yIe88X-r-19">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="DauqCNUrC7Z9yIe88X-r-19" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="310" y="-1165" />
@@ -643,7 +637,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="qbUp6gtjYndA0fy5zK6_-15">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="qbUp6gtjYndA0fy5zK6_-15" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="310" y="-1165" />
@@ -651,7 +645,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="WukdXvazNq34soQIU5Al-126" target="xziP1FcUGqQ5fj1OK8oA-8">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-126" target="xziP1FcUGqQ5fj1OK8oA-8" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1380" y="-1195" />
@@ -659,7 +653,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="xziP1FcUGqQ5fj1OK8oA-7">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="xziP1FcUGqQ5fj1OK8oA-7" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1340" y="-1165" />
@@ -667,10 +661,10 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="WukdXvazNq34soQIU5Al-97">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="WukdXvazNq34soQIU5Al-97" edge="1">
           <mxGeometry relative="1" as="geometry" />
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="WukdXvazNq34soQIU5Al-80">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="WukdXvazNq34soQIU5Al-80" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="400" y="-1495" />
@@ -678,7 +672,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="WukdXvazNq34soQIU5Al-85">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="WukdXvazNq34soQIU5Al-85" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="400" y="-1495" />
@@ -686,10 +680,10 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="DauqCNUrC7Z9yIe88X-r-34">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="DauqCNUrC7Z9yIe88X-r-34" edge="1">
           <mxGeometry relative="1" as="geometry" />
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="WukdXvazNq34soQIU5Al-100">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="WukdXvazNq34soQIU5Al-100" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="840" y="-1495" />
@@ -697,7 +691,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="DauqCNUrC7Z9yIe88X-r-44">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="DauqCNUrC7Z9yIe88X-r-44" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="840" y="-1495" />
@@ -705,7 +699,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="3JuQf5c926Cjea43xpmA-2">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="3JuQf5c926Cjea43xpmA-2" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1300" y="-1495" />
@@ -713,7 +707,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-24" target="DauqCNUrC7Z9yIe88X-r-79">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-24" target="DauqCNUrC7Z9yIe88X-r-79" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="620" y="-515" />
@@ -721,10 +715,10 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-24" target="DauqCNUrC7Z9yIe88X-r-81">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-24" target="DauqCNUrC7Z9yIe88X-r-81" edge="1">
           <mxGeometry relative="1" as="geometry" />
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-74" target="qbUp6gtjYndA0fy5zK6_-7">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-74" target="qbUp6gtjYndA0fy5zK6_-7" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="600" y="-40" />
@@ -732,7 +726,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="EloLfpzvH1tOZlAIu6NC-1">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="EloLfpzvH1tOZlAIu6NC-1" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="280" y="-485" />
@@ -742,7 +736,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="qbUp6gtjYndA0fy5zK6_-9">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="qbUp6gtjYndA0fy5zK6_-9" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="280" y="-485" />
@@ -752,7 +746,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="WukdXvazNq34soQIU5Al-94" target="WukdXvazNq34soQIU5Al-105">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-94" target="WukdXvazNq34soQIU5Al-105" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1070" y="-515" />
@@ -760,7 +754,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="WukdXvazNq34soQIU5Al-110" target="qbUp6gtjYndA0fy5zK6_-20">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-110" target="qbUp6gtjYndA0fy5zK6_-20" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1090" y="-40" />
@@ -768,7 +762,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="WukdXvazNq34soQIU5Al-107">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="WukdXvazNq34soQIU5Al-107" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="280" y="-485" />
@@ -778,7 +772,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="qbUp6gtjYndA0fy5zK6_-22">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="qbUp6gtjYndA0fy5zK6_-22" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="280" y="-485" />
@@ -790,7 +784,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="WukdXvazNq34soQIU5Al-91">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="WukdXvazNq34soQIU5Al-91" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="280" y="-485" />
@@ -802,7 +796,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="xziP1FcUGqQ5fj1OK8oA-2" target="WukdXvazNq34soQIU5Al-66">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="xziP1FcUGqQ5fj1OK8oA-2" target="WukdXvazNq34soQIU5Al-66" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1590" y="-525" />
@@ -810,7 +804,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="xziP1FcUGqQ5fj1OK8oA-3">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="xziP1FcUGqQ5fj1OK8oA-3" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="280" y="-485" />
@@ -820,7 +814,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="WukdXvazNq34soQIU5Al-68">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-32" target="WukdXvazNq34soQIU5Al-68" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="280" y="-485" />
@@ -830,7 +824,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="WukdXvazNq34soQIU5Al-126" target="WukdXvazNq34soQIU5Al-17">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-126" target="WukdXvazNq34soQIU5Al-17" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1990" y="-1195" />
@@ -838,7 +832,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="WukdXvazNq34soQIU5Al-18">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DauqCNUrC7Z9yIe88X-r-2" target="WukdXvazNq34soQIU5Al-18" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1960" y="-1165" />
@@ -846,7 +840,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-33" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="WukdXvazNq34soQIU5Al-110" target="WukdXvazNq34soQIU5Al-19">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-33" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-110" target="WukdXvazNq34soQIU5Al-19" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1960" y="-40" />
@@ -854,7 +848,7 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-34" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="WukdXvazNq34soQIU5Al-20">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-34" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="-K6vikdffkJQkB35vOLp-3" target="WukdXvazNq34soQIU5Al-20" edge="1">
           <mxGeometry relative="1" as="geometry">
             <Array as="points">
               <mxPoint x="1920" y="-1495" />
@@ -862,10 +856,10 @@
             </Array>
           </mxGeometry>
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-35" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="WukdXvazNq34soQIU5Al-16" target="WukdXvazNq34soQIU5Al-42">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-35" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-16" target="WukdXvazNq34soQIU5Al-42" edge="1">
           <mxGeometry relative="1" as="geometry" />
         </mxCell>
-        <mxCell id="MZUjV4dI-UfRvC4hdJyc-36" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="WukdXvazNq34soQIU5Al-49" target="WukdXvazNq34soQIU5Al-58">
+        <mxCell id="MZUjV4dI-UfRvC4hdJyc-36" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-49" target="WukdXvazNq34soQIU5Al-58" edge="1">
           <mxGeometry relative="1" as="geometry" />
         </mxCell>
       </root>

layouts/Actionbar.vue

@@ -1,72 +1,135 @@
 <template>
-  <aside class="actionbar">
-    <div class="icon" id="indicator-icon">
-      <img loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
+  <aside
+    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+      @click="toggleActionbar">
+      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+        src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
-      <button id="search">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
         <div class="icon" id="search-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Search-Icon.svg" />
         </div>
-        <pre class="label">Search</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
+        </Transition>
       </button>
-      <button id="filter">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
         <div class="icon" id="filter-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Filter-Icon.svg" />
         </div>
-        <pre class="label">Filter</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
+        </Transition>
       </button>
-      <button id="instances">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Instances-Icon.svg" />
         </div>
-        <pre class="label">Instances</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
+        </Transition>
       </button>
-      <button id="attachments">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
-        <pre class="label">Attachments</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
+        </Transition>
       </button>
-      <button id="sell">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Sell-Icon.svg" />
         </div>
-        <pre class="label">Sell</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
+        </Transition>
       </button>
-      <button id="archive">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Archive-Icon.svg" />
         </div>
-        <pre class="label">Archive</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
+        </Transition>
       </button>
-      <button id="new">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
         <div class="icon" id="new-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
-        <pre class="label">New</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
+        </Transition>
       </button>
-      <button id="edit">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Edit-Icon.svg" />
         </div>
-        <pre class="label">Edit</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
+        </Transition>
       </button>
-      <button id="delete">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
         <div class="icon" id="delete-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Delete-Icon.svg" />
         </div>
-        <pre class="label">Delete</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
+        </Transition>
       </button>
     </nav>
   </aside>
 </template>
 
+<script setup>
+import { useStore } from 'vuex';
+
+// get accesss to the store
+const store = useStore()
+const toggleEditable = () => {
+  store.commit('toggleEditableAsset');
+};
+const deleteAsset = () => {
+  store.commit('doDeleteAsset');
+};
+const toggleFiltered = () => {
+  store.commit('toggleFilteredAsset');
+};
+const toggleSearched = () => {
+  store.commit('toggleAssetSearchable');
+};
+const addAsset = () => {
+  store.commit('addNewAsset');
+};
+</script>
+
 
 <script>
 
 export default {
-    name: "Actionbar",
+  name: "Actionbar",
+  data() {
+    return {
+      darkMode: true,
+      isExpanded: true,
+    };
+  },
+  methods: {
+    toggleActionbar() {
+      this.isExpanded = !this.isExpanded;
+    },
+  },
 }
 
 </script>
@@ -74,93 +137,233 @@ export default {
 
 
 <style scoped>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
+
+aside.actionbar {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 5rem;
+  height: fit-content;
+  width: fit-content;
+  inline-size: fit-content;
+  border-radius: 0.625rem;
+  flex: 0 0 0;
+  align-items: stretch;
+  justify-content: center;
+  padding: 1.875rem 0.625rem;
+  gap: 1.25rem;
+  transition: all 10s ease-in-out 0s;
+  overflow: clip;
+}
+
+.actionbar-darkmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #2C2C2C;
+}
+
+.actionbar-lightmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #FFFFFF;
+}
+
+aside.is-expanded {
+  animation: expand 0.5s linear both;
+}
+
+aside.is-not-expanded {
+  animation: contract 0.5s linear both;
+  width: stretch;
+  inline-size: stretch;
+}
+
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1.25rem 0;
+  gap: 1.25rem;
+  overflow: clip;
+}
+
+
+button {
+  display: flex;
+  flex-direction: row;
+  align-self: stretch;
+  height: 1.875rem;
+  border-radius: 0.625rem;
+  align-items: center;
+  justify-content: flex-start;
+  border: none;
+  transition: 0.2s ease-in-out;
+  overflow: clip;
+  gap: 0.125rem
+}
+
+.button-darkmode {
+  background-color: #2C2C2C;
+}
+
+.button-lightmode {
+  background-color: #FFFFFF;
+}
+
+.button-darkmode:hover,
+.indicator-darkmode:hover {
+  background-color: #444444;
+}
+
+.button-lightmode:hover,
+.indicator-lightmode:hover {
+  background-color: #ACACAC;
+}
+
+.is-not-expanded>button {
+  align-self: center;
+  gap: 0.5rem;
+}
+
+
+.icon {
+  display: flex;
+  flex-direction: row;
+  /*width: 0.875rem;*/
+  height: 1.875rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5rem;
+  transition: padding 0.5s linear
+}
+
+#indicator-icon {
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: 0.3125rem;
+  transition: 0.2s ease-in-out;
+}
+
+.is-not-expanded .icon {
+  align-self: center;
+  padding: 0 0.375rem;
+}
+
+.is-not-expanded #indicator-icon {
+  transform: rotate(180deg);
+}
+
+img {
+  width: 0.875rem;
+  height: 0.875rem;
+  object-fit: contain;
+  object-position: center;
+  overflow: hidden;
+}
+
+#indicator-icon>img {
+  height: 1.25rem;
+}
+
+.img-darkmode {
+  filter: invert(100%);
+}
+
+
+.label {
+  display: inline-flex;
+  min-width: 0;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  letter-spacing: 5%;
+  align-self: center;
+  white-space: nowrap;
+  font: 400 0.875rem/1.25rem Overpass, sans-serif;
+}
+
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000000;
+}
+
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+  max-width: 0;
+}
+
+.fade-enter-active {
+  transition: all 0.75s;
+  overflow: clip;
+  animation: fade-in 0.5s linear forwards;
+}
+
+.fade-leave-active {
+  transition: all 0.75s;
+  animation: fade-out 0.5s linear forwards;
+}
+
+.fade-move {
+  transition: transform 5s
+}
+
+@keyframes expand {
+  from {
+    max-inline-size: 3.25rem;
+    max-width: 3.25rem;
   }
 
+  to {
+    max-inline-size: 9.0625rem;
+    max-width: 9.0625rem;
+  }
+}
 
-  .actionbar {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
+@keyframes contract {
+  from {
+    max-inline-size: 9.0625rem;
+    max-width: 9.0625rem;
+  }
+
+  to {
+    max-inline-size: 3.25rem;
+    max-width: 3.25rem;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    max-width: 0;
+    max-inline-size: 0;
+  }
+
+  to {
+    max-width: 7.5rem;
+    width: fit-content;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    max-width: 7.5rem;
     width: fit-content;
-    height: fit-content;
-    border-radius: 10px;
-    padding: 30px 10px;
-    gap: 20px;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
   }
 
-
-  .actions {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-    align-self: stretch;
-    padding: 20px 0;
-    gap: 20px;
+  to {
+    max-width: 0;
+    max-inline-size: 0;
   }
-
-
-  button {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    height: 30px;
-    border-radius: 10px;
-    border: none;
-    background-color: #2c2c2c;
-    transition-duration: 0.5s;
-  }
-  button:hover {
-    background-color: #444444;
-  }
-
-
-  .icon {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-  }
-  #indicator-icon {
-    width: 30px;
-    height: 30px;
-    border-radius: 5px;
-    background-color: #2c2c2c;
-    transition-duration: 0.5s;
-  }
-  #indicator-icon:hover {
-    background-color: #444444;
-  }
-
-  .icon > img {
-    width: 14px;
-    height: 14px;
-    filter: invert(100%);
-    object-fit: contain;
-    object-position: center;
-    overflow: hidden;
-  }
-  #indicator-icon > img {
-    height: 20px;
-  }
-
-
-  .label {
-    color: #fff;
-    letter-spacing: 0.7px;
-    align-self: center;
-    white-space: nowrap;
-    font: 400 14px/20px Overpass, sans-serif;
-  }
-  
-
+}
 </style>

layouts/Navigationbar.vue

@@ -1,61 +1,68 @@
 <template>
-  <aside :class="[darkMode ? 'navbar-dark' : 'navbar-light', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
-    <div class="toggle">
-      <div v-if="isExpanded" :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="back-icon">
-        <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" src="../icons/Back-Icon.svg" />
+  <aside
+    :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div class="toggleNavbar">
+      <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
       </div>
-      <div :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="indicator-icon" @click="toggleSidebar">
-        <img :style="[darkMode ? darkStylesImg : lightStylesImg ]" 
-          loading="lazy" 
+      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+        @click="ToggleSidebar">
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
           src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
     </div>
     <div class="menus">
-      <nav :class="{ 'dark-home-menu': darkMode, 'light-home-menu': !darkMode }" id="home-menu">
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="home-button">
+      <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
+        <router-link to="/home" class="button"
+          :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
           <div class="icon" id="home-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Home-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Home</pre>
-        </button>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
+        </router-link>
       </nav>
       <nav id="site-menu">
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="checklists-button">
           <div class="icon" id="checklists-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Checklists-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Checklists</pre>
-        </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="assets-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
+        </router-link>
+        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()"
+          id="assets-button">
           <div class="icon" id="assets-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Assets-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Config Items</pre>
-        </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="solutions-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
+        </nuxt-link>
+        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="solutions-button">
           <div class="icon" id="solutions-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Solutions-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Solutions</pre>
-        </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="accounting-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
+        </router-link>
+        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="accounting-button">
           <div class="icon" id="accounting-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Accounting-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Accounting</pre>
-        </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="clients-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
+        </router-link>
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="clients-button">
           <div class="icon" id="clients-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Clients-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre>
-        </button>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
+        </router-link>
       </nav>
     </div>
   </aside>
@@ -63,35 +70,29 @@
 
 
 
-<script>
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'vuex';
 
+const darkMode = ref(true)
+const isExpanded = ref(true)
+
+// get accesss to the store
+const store = useStore()
+const defaultAssetPage = () => {
+  store.commit('resetAssetStore');
+  store.commit('changeToAssetlist');
+};
+
+const ToggleSidebar = () => {
+  isExpanded.value = !isExpanded.value;
+};
+</script>
+
+<script>
 export default {
   name: "Navigationbar",
-  data() {
-    return {
-      darkMode: false,
-      isExpanded: true,
-      darkStylesImg: {
-        filter: 'invert(100%)',
-      },
-      lightStylesImg: {
-        filter: 'none',
-      },
-      darkStylesLabel: {
-        color: '#fff',
-      },
-      lightStylesLabel: {
-        color: '#000',
-      },
-    };
-  },
-  methods: {
-    toggleSidebar() {
-      this.isExpanded = !this.isExpanded;
-    }
-  }
 }
-
 </script>
   
   
@@ -102,198 +103,183 @@ export default {
 }
 
 aside {
-  transition: 0.2s ease-out;
   display: flex;
   flex-direction: column;
-  width: calc(2.5rem + 2.5rem);
-  overflow: hidden;
+  position: sticky;
+  top: 5rem;
+  width: 3.125rem;
+  transition: 0.5s ease-in-out;
 }
 
 aside.is-expanded {
-  width: 238px;
+  width: 12.5rem;
 }
 
 .is-expanded .label {
   opacity: 1;
-  transition: 0.3s ease-out;
+  transition: 0.5s ease-in-out;
 }
 
-.is-not-expanded .darkStylesIcon {
-  transform: rotate(180deg);
-}
-
-.is-not-expanded .lightStylesIcon {
+.is-not-expanded #indicator-icon {
   transform: rotate(180deg);
+  transition: 0.5s ease-in-out;
 }
 
 
-.navbar-dark {
+.navbar {
   display: flex;
   flex-direction: column;
+  height: fit-content;
+  border-radius: 0.625rem;
   align-items: stretch;
   justify-content: center;
-  height: fit-content;
-  border-radius: 10px;
-  gap: 10px;
-  padding: 15px;
+  gap: 0.625rem;
+  padding: 0.9375rem;
   margin: 0;
-  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-  background-color: #2c2c2c;
 }
 
-.navbar-light {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: fit-content;
-  border-radius: 10px;
-  gap: 10px;
-  padding: 15px;
-  margin: 0;
-  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+.navbar-darkmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #2C2C2C;
+}
+
+.navbar-lightmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
 }
 
 
-.toggle {
+.toggleNavbar {
   display: flex;
   flex-direction: row;
+  height: 2.5rem;
   align-items: center;
   justify-content: space-between;
-  height: 40px;
 }
 
 
-
 .menus {
   display: flex;
   flex-direction: column;
   position: relative;
-  transition: 0.2s ease-out;
   justify-content: flex;
-  padding: 20px 0;
-  gap: 30px;
+  padding: 1.25rem 0;
+  gap: 1.875rem;
+  transition: 0.5s ease-in-out;
+  align-items: center;
 }
 
+
 nav {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-top: 0.8rem;
-  padding-bottom: 0.8rem;
-  gap: 30px;
+  padding: 0.9375rem 0;
+  gap: 1.875rem;
+  width: 92%;
 }
 
-button {
+.menu-darkmode {
+  border-bottom: 0.0625rem solid #8E8E8E;
+}
+
+.menu-lightmode {
+  border-bottom: 0.0625rem solid #BABABA;
+}
+
+
+
+button,
+a {
   display: flex;
   flex-direction: row;
+  align-self: stretch;
+  height: 2.1875rem;
+  border-radius: 0.3125rem;
   align-items: center;
   justify-content: flex-start;
-  align-self: stretch;
-  height: 35px;
-  border-radius: 5px;
-  gap: 5px;
+  gap: 0.3125rem;
   border: none;
-  background-color: #2c2c2c;
-  transition-duration: 0.5s;
+  transition: 0.5s ease-in-out;
+  text-decoration: none;
+  width: 100%;
 }
 
-.dark-menu {
-  background-color: #2c2c2c;
+.button-darkmode {
+  background-color: #2C2C2C;
 }
 
-.light-menu {
+.button-lightmode {
   background-color: #FFFFFF;
 }
 
-.dark-menu:hover {
+.button-darkmode:hover,
+.indicator-darkmode:hover,
+.back-darkmode:hover {
   background-color: #444444;
 }
 
-.light-menu:hover {
+.button-lightmode:hover,
+.indicator-lightmode:hover,
+.back-lightmode:hover {
   background-color: #ACACAC;
 }
 
 .icon {
   display: flex;
   flex-direction: row;
+  width: 2.1875rem;
+  height: 2.1875rem;
   align-items: center;
   justify-content: center;
-  width: 35px;
-  height: 35px;
-  transition: 0.2s ease-out;
-}
-
-.lightStylesIcon {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 35px;
-  transition: 0.2s ease-out;
-}
-
-.darkStylesIcon {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 35px;
-  transition: 0.2s ease-out;
-}
-
-#back-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 5px;
-  transition-duration: 0.5s;
-  transition: 0.2s ease-out;
+  transition: 0.2s ease-in-out;
 }
 
+#back-icon,
 #indicator-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 5px;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.3125rem;
   transition-duration: 0.5s;
-  transition: transform 0.3s;
+  transition: 0.2s ease-out;
 }
 
-.lightStylesIcon:hover {
-  background-color: #ACACAC;
+.back-darkmode:hover,
+.back-lightmode:hover,
+.indicator-darkmode:hover,
+.indicator-lightmode:hover {
+  cursor: pointer;
 }
 
-.darkStylesIcon:hover {
-  background-color: #444444;
-}
 
-.icon>img,
-.lightStylesIcon>img,
-.darkStylesIcon>img {
-  width: 20px;
-  height: 20px;
+img {
+  width: 1.25rem;
+  height: 1.25rem;
   object-fit: contain;
   object-position: center;
   overflow: hidden;
   transition: 0.2s ease-out;
 }
 
-.dark-home-menu {
-  border-bottom: 1px solid #8e8e8e;
-}
-
-.light-home-menu {
-  border-bottom: 1px solid #BABABA;
+.img-darkmode {
+  filter: invert(100%);
 }
 
 .label {
-  letter-spacing: 0.7px;
+  letter-spacing: 5%;
   align-self: center;
   white-space: nowrap;
   margin: auto 0;
-  font: 600 14px/20px Overpass, sans-serif;
+  font: 600 0.875rem/1.25rem Overpass, sans-serif;
   opacity: 0;
-  transition: opacity 0.5s ease-out; 
+  transition: opacity 0.5s ease-out;
+}
+
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000000;
 }
 </style>

layouts/PageHeader.vue

@@ -1,73 +1,104 @@
 <template>
-    <header>
-        <img id="header-logo"
-            loading="lazy" src="../tüit-logo.svg.png" />
+    <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
+        <img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
         <div class="profile">
-            <div class="username">username</div>
-            <div class="picture">
-                <img id="picture"
-                    loading="lazy" src="" />
+            <div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
+            <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
+                <img id="picture" loading="lazy" src="" />
             </div>
         </div>
     </header>
 </template>
 
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+
+</script>
+
 <script>
-
 export default {
-    name: "PageHeader",
+  name: "PageHeader",
 }
-
 </script>
 
 
 <style scoped>
+* {
+    box-sizing: border-box;
+}
 
-    * {
-        box-sizing: border-box;
-    }
+header {
+    display: flex;
+    flex-direction: row;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    height: 4.375rem;
+    align-self: stretch;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.625rem 1.25rem;
+}
 
-    header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        align-self: stretch;
-        background-color: #2c2c2c;
-        height: 60px;
-        padding: 10px 20px;
-    }
-    
-    #header-logo {
-        object-fit: contain;
-        object-position: center;
-        width: 80px;
-        height: 40px;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-    }
+.header-darkmode {
+    background-color: #212121;
+    border-bottom: 0.125em solid #000;
+}
 
-    .profile {
-        align-items: flex-end;
-        display: flex;
-        gap: 10px;
-        padding: 0 30px;
-    }
-    .username {
-        color: #fff;
-        text-align: right;
-        letter-spacing: 0.8px;
-        align-self: center;
-        margin: auto 0;
-        font: 200 14px Overpass, sans-serif;
-    }
-    .picture {
-        display: flex;
-        border-radius: 50%;
-        width: 40px;
-        height: 40px;
-        background-color: #fff;
-    }
+.header-lightmode {
+    background-color: #EBEBEB;
+    border-bottom: 0.125em solid #8e8e8e61;
+}
 
+#header-logo {
+    object-fit: contain;
+    object-position: center;
+    width: 5rem;
+    height: 2.5rem;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.profile {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 0.625rem;
+    padding: 0 0.625rem;
+}
+
+.username {
+    align-self: center;
+    margin: auto 0;
+    text-align: right;
+    font: 200 0.875rem Overpass, sans-serif;
+    letter-spacing: 5%;
+}
+
+.username-darkmode {
+    color: #fff;
+}
+
+.username-lightmode {
+    color: #000;
+}
+
+.picture {
+    display: flex;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+}
+
+.picture-darkmode {
+    background-color: #fff;
+}
+
+.picture-lightmode {
+    background-color: #000;
+}
 </style>

layouts/default.vue

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

layouts/empty.vue

@@ -0,0 +1,47 @@
+<template>
+  <PageHeader />
+  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
+    <slot />
+  </main>
+</template>
+  
+  
+<script setup>
+import PageHeader from "../layouts/PageHeader.vue";
+
+const darkMode = ref(true)
+
+</script>
+
+<script>
+export default {
+  name: "empty",
+}
+</script>    
+    
+    
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+
+main {
+  display: flex;
+  flex-direction: row;
+  gap: 0.625rem;
+  padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
+  height: 100vh;
+  width: 100vw;
+  height: 100%;
+  width: 100%;
+}
+
+.main-darkmode {
+  background-color: #212121;
+}
+
+.main-lightmode {
+  background-color: #EBEBEB;
+}
+</style>

middleware/auth.js

@@ -0,0 +1,12 @@
+// 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
+//   }

nuxt.config.ts

@@ -1,4 +1,39 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import type {
+  NuxtPage
+} from 'nuxt/schema'
+
 export default defineNuxtConfig({
-  devtools: { enabled: true }
+  devtools: { enabled: true },
+  devServer: {
+    https: {
+      key: './certs/privkey.pem',
+      cert: './certs/fullchain.pem'
+    }
+  },
+  vite: {
+    server: {
+      cors: {
+        origin: true,
+        optionsSuccessStatus: 204,
+      },
+    }
+  },
+  // hooks: {
+  //   'pages:extend'(pages) {
+  //     function setMiddleware(pages: NuxtPage[]) {
+  //       for (const page of pages) {
+  //         if (/* some condition */ true) {
+  //           page.meta ||= {}
+  //           // Note that this will override any middleware set in `definePageMeta` in the page
+  //           page.meta.middleware = ['auth']
+  //         }
+  //         if (page.children) {
+  //           setMiddleware(page.children)
+  //         }
+  //       }
+  //     }
+  //     setMiddleware(pages)
+  //   }
+  // }
 })

package.json

@@ -16,6 +16,16 @@
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "leading-trim": "^1.0.2"
+    "@vueform/toggle": "^2.1.4",
+    "axios": "^1.6.7",
+    "bcryptjs": "^2.4.3",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.2",
+    "leading-trim": "^1.0.2",
+    "mariadb": "^3.2.3",
+    "uuid": "^9.0.1",
+    "vite": "^5.1.0",
+    "vuex": "^4.1.0"
   }
 }