From e7bcab5ae32b31a99b3a31f649c1315a70501ae0 Mon Sep 17 00:00:00 2001
From: Jan <jan.weber@avatic.de>
Date: Tue, 12 Aug 2025 15:20:34 +0200
Subject: [PATCH] FRONTEND: Add new UI components (`ModalDialog`, `Dropdown`,
 `InputField`) and store modules (`AssistantStore`, `NodeStore`) with
 comprehensive state management; refactor styles for consistency across
 buttons, input fields, and search components; enhance calculation and node
 creation workflows.

---
 src/frontend/src/App.vue                      |  13 +-
 .../components/UI/AutoSuggestSearchBar.vue    | 330 +++++++++-------
 .../src/components/UI/BasicButton.vue         |   7 +-
 src/frontend/src/components/UI/Box.vue        |  23 ++
 src/frontend/src/components/UI/Dropdown.vue   | 351 ++++++++++++++++++
 src/frontend/src/components/UI/Flag.vue       |   8 +-
 src/frontend/src/components/UI/InputField.vue |  63 ++++
 src/frontend/src/components/UI/Modal.vue      | 117 ++++++
 .../src/components/UI/ModalDialog.vue         |  90 +++++
 src/frontend/src/components/UI/Spinner.vue    |  58 ++-
 src/frontend/src/components/UI/Tooltip.vue    |   1 -
 .../src/components/layout/TheHeader.vue       |   2 +-
 .../layout/TheNewSupplierDialog.vue           |  15 -
 .../layout/assistant/MaterialItem.vue         |  72 +++-
 .../layout/assistant/SupplierItem.vue         |  92 ++++-
 .../assistant/TheDropPartNumbersDialog.vue    |  15 -
 .../calculation/TheCalculationSearch.vue      |  21 +-
 .../layout/edit/DestinationListView.vue       |  16 +
 .../components/layout/edit/MaterialEdit.vue   | 148 ++++++++
 .../components/layout/edit/PackagingEdit.vue  | 171 +++++++++
 .../src/components/layout/edit/PriceEdit.vue  | 110 ++++++
 .../components/layout/edit/SupplierView.vue   | 145 ++++++++
 .../edit/destination/DestinationEdit.vue      |  16 +
 .../edit/destination/DestinationItem.vue      |  16 +
 .../components/layout/node/CreateNewNode.vue  | 122 ++++++
 src/frontend/src/main.js                      |  36 +-
 .../src/pages/CalculationAssistant.vue        | 227 ++++++++++-
 .../src/pages/CalculationSingleEdit.vue       |  99 ++++-
 src/frontend/src/pages/Calculations.vue       |   2 +-
 src/frontend/src/store/assistant.js           | 178 +++++++++
 src/frontend/src/store/node.js                |  68 ++++
 31 files changed, 2413 insertions(+), 219 deletions(-)
 create mode 100644 src/frontend/src/components/UI/Box.vue
 create mode 100644 src/frontend/src/components/UI/Dropdown.vue
 create mode 100644 src/frontend/src/components/UI/InputField.vue
 create mode 100644 src/frontend/src/components/UI/Modal.vue
 create mode 100644 src/frontend/src/components/UI/ModalDialog.vue
 delete mode 100644 src/frontend/src/components/layout/TheNewSupplierDialog.vue
 delete mode 100644 src/frontend/src/components/layout/assistant/TheDropPartNumbersDialog.vue
 create mode 100644 src/frontend/src/components/layout/edit/DestinationListView.vue
 create mode 100644 src/frontend/src/components/layout/edit/MaterialEdit.vue
 create mode 100644 src/frontend/src/components/layout/edit/PackagingEdit.vue
 create mode 100644 src/frontend/src/components/layout/edit/PriceEdit.vue
 create mode 100644 src/frontend/src/components/layout/edit/SupplierView.vue
 create mode 100644 src/frontend/src/components/layout/edit/destination/DestinationEdit.vue
 create mode 100644 src/frontend/src/components/layout/edit/destination/DestinationItem.vue
 create mode 100644 src/frontend/src/components/layout/node/CreateNewNode.vue
 create mode 100644 src/frontend/src/store/assistant.js
 create mode 100644 src/frontend/src/store/node.js

diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index 9c01d6c..85e46eb 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -28,8 +28,15 @@ export default {
 
 .page-header {
   font-weight: normal;
-  margin-bottom: 30px;
-  font-size: 24px;
+  margin-bottom: 3rem;
+  font-size: 2.4rem;
+  color: #002F54;
+}
+
+.sub-header {
+  font-weight: normal;
+  font-size: 1.4rem;
+  color: #6B869C;
 }
 
 html {
@@ -38,7 +45,7 @@ html {
 }
 
 body {
-  padding: 20px;
+  padding: 20px 60px;
   font-family: 'Poppins', sans-serif;
   background-color: #f8fafc;
   color: #002F54;
diff --git a/src/frontend/src/components/UI/AutoSuggestSearchBar.vue b/src/frontend/src/components/UI/AutoSuggestSearchBar.vue
index 1e469fb..0f88556 100644
--- a/src/frontend/src/components/UI/AutoSuggestSearchBar.vue
+++ b/src/frontend/src/components/UI/AutoSuggestSearchBar.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="autosuggest-container" ref="container">
-    <div class="search-input-wrapper">
+    <div class="search-wrapper">
+      <PhMagnifyingGlass :size="32" weight="bold" class="search-icon"/>
       <input
           ref="searchInput"
           v-model="searchQuery"
@@ -13,40 +14,51 @@
           autocomplete="off"
       />
       <div v-if="isLoading" class="loading-indicator">
-        <svg class="spinner" viewBox="0 0 24 24">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-dasharray="60" stroke-dashoffset="60">
-            <animate attributeName="stroke-dashoffset" dur="2s" values="60;0" repeatCount="indefinite"/>
-          </circle>
-        </svg>
+        <spinner size="s"></spinner>
       </div>
     </div>
 
-    <div
-        v-if="showSuggestions && suggestions.length > 0"
-        class="suggestions-dropdown"
-    >
-      <ul class="suggestions-list" role="listbox">
-        <li
-            v-for="(suggestion, index) in suggestions"
-            :key="getSuggestionKey(suggestion, index)"
-            @click="selectSuggestion(suggestion)"
-            @mouseenter="highlightedIndex = index"
-            :class="[
+
+    <transition name="dropdown">
+      <div
+          v-if="showSuggestions && suggestions.length > 0"
+          class="suggestions-dropdown"
+      >
+        <ul class="suggestions-list">
+          <li
+              v-for="(suggestion, index) in suggestions"
+              :key="getIdFor(suggestion, index)"
+              @click="selectItem(suggestion)"
+              @mouseenter="highlightedIndex = index"
+              :class="[
             'suggestion-item',
             { 'highlighted': index === highlightedIndex }
           ]"
-            role="option"
-            :aria-selected="index === highlightedIndex"
-        >
-          <div class="suggestion-content">
-            <span class="suggestion-text" v-html="highlightMatch(getSuggestionText(suggestion))"></span>
-            <span v-if="getSuggestionCategory(suggestion)" class="suggestion-category">
-              {{ getSuggestionCategory(suggestion) }}
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
+          >
+            <div v-if="isFlagVariant">
+              <div class="suggestion-content-with-flag">
+                <flag :iso="getFlagIsoFor(suggestion)"></flag>
+                <div>
+                  <div class="suggestion-title">{{ getTitleFor(suggestion) }}</div>
+                  <div v-if="getSubtitleFor(suggestion)" class="suggestion-subtitle">
+                    {{ getSubtitleFor(suggestion) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else>
+              <div class="suggestion-content">
+                <span class="suggestion-title">{{ getTitleFor(suggestion) }}</span>
+                <basic-badge variant="grey" v-if="getSubtitleFor(suggestion)">{{
+                    getSubtitleFor(suggestion)
+                  }}
+                </basic-badge>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </transition>
 
     <div
         v-if="showSuggestions && searchQuery && suggestions.length === 0 && !isLoading"
@@ -58,8 +70,14 @@
 </template>
 
 <script>
+import Spinner from "@/components/UI/Spinner.vue";
+import Flag from "@/components/UI/Flag.vue";
+import {useDebounceFn} from "@vueuse/core";
+import BasicBadge from "@/components/UI/BasicBadge.vue";
+
 export default {
   name: 'AutosuggestSearchbar',
+  components: {BasicBadge, Flag, Spinner},
 
   props: {
     // Display props
@@ -71,49 +89,51 @@ export default {
       type: String,
       default: 'No results found for "{query}"'
     },
-
+    variant: {
+      type: String,
+      default: "tags"
+    },
     // Behavior props
     minChars: {
       type: Number,
       default: 2
     },
-    debounceMs: {
-      type: Number,
-      default: 300
-    },
     maxSuggestions: {
       type: Number,
       default: 10
     },
-
-    // Data source functions
     fetchSuggestions: {
       type: Function,
       required: true
       // Expected signature: async (query: string) => Array
     },
-
-    // Optional data extraction functions for custom suggestion objects
-    suggestionTextKey: {
+    titleResolver: {
       type: [String, Function],
-      default: 'text'
-      // Can be string (property name) or function (suggestion => string)
+      default: 'title'
     },
-    suggestionCategoryKey: {
+    subtitleResolver: {
       type: [String, Function],
-      default: 'category'
-      // Can be string (property name) or function (suggestion => string)
+      default: 'subtitle'
     },
-    suggestionKeyProperty: {
+    idResolver: {
       type: [String, Function],
       default: 'id'
-      // Can be string (property name) or function (suggestion => string/number)
     },
-
-    // Initial state
+    flagResolver: {
+      type: [String, Function],
+      default: 'iso'
+    },
+    resetOnSelect: {
+      type: Boolean,
+      default: false
+    },
     initialSuggestions: {
       type: Array,
       default: () => []
+    },
+    initialValue: {
+      type: String,
+      default: '',
     }
   },
 
@@ -124,25 +144,19 @@ export default {
       isLoading: false,
       showSuggestions: false,
       highlightedIndex: -1,
-      debounceTimer: null
+      debounceTimer: null,
+      debouncedSearch: null,
     }
   },
 
   computed: {
-    filteredSuggestions() {
-      return this.suggestions.slice(0, this.maxSuggestions)
+    isFlagVariant() {
+      return this.variant === 'flags';
     }
   },
-
   methods: {
     onInput() {
-      if (this.debounceTimer) {
-        clearTimeout(this.debounceTimer)
-      }
-
-      this.debounceTimer = setTimeout(() => {
-        this.handleSearch()
-      }, this.debounceMs)
+      this.debouncedSearch(this.searchQuery);
     },
 
     async handleSearch() {
@@ -200,7 +214,7 @@ export default {
         case 'Enter':
           event.preventDefault()
           if (this.highlightedIndex >= 0) {
-            this.selectSuggestion(this.suggestions[this.highlightedIndex])
+            this.selectItem(this.suggestions[this.highlightedIndex])
           } else {
             this.handleEnterWithoutSelection()
           }
@@ -217,10 +231,15 @@ export default {
       }
     },
 
-    selectSuggestion(suggestion) {
-      this.searchQuery = this.getSuggestionText(suggestion)
+    selectItem(suggestion) {
+      if (this.resetOnSelect) {
+        this.searchQuery = '';
+      } else {
+        this.searchQuery = this.getTitleFor(suggestion)
+
+      }
       this.hideSuggestions()
-      this.$emit('suggestion-selected', suggestion)
+      this.$emit('selected', suggestion)
       this.$emit('search', this.searchQuery)
       this.$refs.searchInput.blur()
     },
@@ -236,36 +255,31 @@ export default {
     },
 
     // Helper methods for extracting data from suggestion objects
-    getSuggestionText(suggestion) {
-      if (typeof this.suggestionTextKey === 'function') {
-        return this.suggestionTextKey(suggestion)
+    getTitleFor(suggestion) {
+      if (typeof this.titleResolver === 'function') {
+        return this.titleResolver(suggestion)
       }
-      return suggestion[this.suggestionTextKey] || suggestion.toString()
+      return suggestion[this.titleResolver] || suggestion.toString()
     },
 
-    getSuggestionCategory(suggestion) {
-      if (typeof this.suggestionCategoryKey === 'function') {
-        return this.suggestionCategoryKey(suggestion)
+    getSubtitleFor(suggestion) {
+      if (typeof this.subtitleResolver === 'function') {
+        return this.subtitleResolver(suggestion)
       }
-      return suggestion[this.suggestionCategoryKey] || null
+      return suggestion[this.subtitleResolver] || null
     },
-
-    getSuggestionKey(suggestion, index) {
-      if (typeof this.suggestionKeyProperty === 'function') {
-        return this.suggestionKeyProperty(suggestion)
+    getFlagIsoFor(suggestion) {
+      if (typeof this.flagResolver === 'function') {
+        return this.flagResolver(suggestion)
       }
-      return suggestion[this.suggestionKeyProperty] || index
+      return suggestion[this.flagResolver] || null
     },
 
-    highlightMatch(text) {
-      if (!this.searchQuery || !text) return text
-
-      const regex = new RegExp(`(${this.escapeRegex(this.searchQuery)})`, 'gi')
-      return text.replace(regex, '<mark>$1</mark>')
-    },
-
-    escapeRegex(string) {
-      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    getIdFor(suggestion, index) {
+      if (typeof this.idResolver === 'function') {
+        return this.idResolver(suggestion)
+      }
+      return suggestion[this.idResolver] || index
     },
 
     handleClickOutside(event) {
@@ -294,7 +308,14 @@ export default {
     }
   },
 
+  created() {
+    this.debouncedSearch = useDebounceFn((query) => {
+      this.handleSearch(query);
+    }, 300);
+  },
+
   mounted() {
+    this.searchQuery = this.initialValue;
     document.addEventListener('click', this.handleClickOutside)
   },
 
@@ -324,41 +345,76 @@ export default {
 <style scoped>
 .autosuggest-container {
   position: relative;
-  width: 100%;
-  max-width: 400px;
 }
 
-.search-input-wrapper {
-  position: relative;
+.search-wrapper {
   display: flex;
   align-items: center;
+  background: white;
+  border-radius: 0.4rem;
+  padding: 0.6rem 1.2rem;
+  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
+  border: 0.2rem solid #E3EDFF;
+  transition: all 0.1s ease;
+
 }
 
+.search-wrapper:hover {
+  background: #EEF4FF;
+  border: 0.2rem solid #8DB3FE;
+  /*transform: translateY(2px);*/
+  transform: scale(1.01);
+}
+
+
 .search-input {
-  width: 100%;
-  padding: 12px 16px;
-  border: 2px solid #e0e0e0;
-  border-radius: 8px;
-  font-size: 16px;
+  border: none;
   outline: none;
-  transition: border-color 0.2s ease;
+  background: none;
+  resize: none;
+  width: 100%;
+  font-size: 1.4rem;
+  font-family: inherit;
+  color: #002F54;
+  font-weight: 400;
+  min-width: 10rem;
 }
 
-.search-input:focus {
-  border-color: #007bff;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+.search-icon {
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 1.2rem;
+  color: #6B869C;
+  flex-shrink: 0;
+}
+
+.search-input::placeholder {
+  color: #6B869C;
+  font-weight: 400;
 }
 
 .loading-indicator {
   position: absolute;
-  right: 16px;
+  right: 1.6rem;
   pointer-events: none;
 }
 
-.spinner {
-  width: 20px;
-  height: 20px;
-  color: #007bff;
+.dropdown-enter-active {
+  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.dropdown-leave-active {
+  transition: all 0.2s ease-in;
+}
+
+.dropdown-enter-from {
+  transform: translateY(-30px);
+  opacity: 0;
+}
+
+.dropdown-leave-to {
+  transform: translateY(-30px);
+  opacity: 0;
 }
 
 .suggestions-dropdown {
@@ -367,13 +423,14 @@ export default {
   left: 0;
   right: 0;
   background: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border: 0.1rem solid #E3EDFF;
+  border-radius: 0.8rem;
+  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
   z-index: 1000;
-  max-height: 300px;
+  max-height: 50rem;
   overflow-y: auto;
-  margin-top: 4px;
+  margin-top: 0.4rem;
 }
 
 .suggestions-list {
@@ -383,9 +440,9 @@ export default {
 }
 
 .suggestion-item {
-  padding: 12px 16px;
+  padding: 1.2rem 1.6rem;
   cursor: pointer;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 0.16rem solid #f3f4f6;
   transition: background-color 0.2s ease;
 }
 
@@ -395,7 +452,15 @@ export default {
 
 .suggestion-item:hover,
 .suggestion-item.highlighted {
-  background-color: #f8f9fa;
+  background-color: rgba(107, 134, 156, 0.05);
+}
+
+.suggestion-content-with-flag {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.6rem;
 }
 
 .suggestion-content {
@@ -404,37 +469,38 @@ export default {
   align-items: center;
 }
 
-.suggestion-text {
+.suggestion-title {
   flex: 1;
-  font-size: 14px;
-  color: #333;
+  font-size: 1.6rem;
+  color: #001D33;
 }
 
-.suggestion-text :deep(mark) {
-  background-color: #fff3cd;
-  color: #856404;
-  padding: 0 2px;
-  border-radius: 2px;
+.suggestion-subtitle {
+  font-size: 1.4rem;
+  color: #6b7280;
 }
 
-.suggestion-category {
-  font-size: 12px;
-  color: #666;
-  background-color: #e9ecef;
-  padding: 2px 6px;
-  border-radius: 4px;
-  margin-left: 8px;
+.suggestion-subtitle-tag {
+  font-size: 1.4rem;
+  color: #ffffff;
+  background-color: #003c6a;
+  padding: 0.4rem 0.8rem;
+  border-radius: 0.4rem;
 }
 
 .no-results {
-  padding: 16px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 1.6rem;
   text-align: center;
-  color: #666;
-  font-style: italic;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  margin-top: 4px;
+  color: #001D33;
+  border: 0.1rem solid #e0e0e0;
+  border-radius: 0.8rem;
+  margin-top: 0.4rem;
   background: white;
+  font-size: 1.6rem
 }
 
 /* Mobile responsiveness */
diff --git a/src/frontend/src/components/UI/BasicButton.vue b/src/frontend/src/components/UI/BasicButton.vue
index 647c4ea..ba00371 100644
--- a/src/frontend/src/components/UI/BasicButton.vue
+++ b/src/frontend/src/components/UI/BasicButton.vue
@@ -11,7 +11,6 @@
         weight="bold"
         size="18"
         class="btn-icon"
-
     />
     <span class="btn-text"><slot></slot></span>
   </button>
@@ -92,15 +91,16 @@ export default defineComponent({
   border: 0.2rem solid transparent;
   border-radius: 0.8rem;
   font-size: 1.4rem;
-  font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
   outline: none;
   user-select: none;
+  font-family: 'Poppins', sans-serif;
 }
 
 /* Primary variant */
 .btn--primary {
+  font-weight: 500;
   background-color: #5AF0B4;
   color: #002F54;
   border-color: transparent;
@@ -113,6 +113,7 @@ export default defineComponent({
 
 /* Secondary variant */
 .btn--secondary {
+  font-weight: 500;
   background-color: #002F54;
   color: #ffffff;
   border-color: transparent;
@@ -122,6 +123,7 @@ export default defineComponent({
   background-color: #ffffff;
   color: #002F54;
   border-color: #002F54;
+  font-weight: 500;
 }
 
 
@@ -133,6 +135,7 @@ export default defineComponent({
 
 .btn-icon {
   flex-shrink: 0;
+  display: inline-block;
 }
 
 .btn-text {
diff --git a/src/frontend/src/components/UI/Box.vue b/src/frontend/src/components/UI/Box.vue
new file mode 100644
index 0000000..da98f07
--- /dev/null
+++ b/src/frontend/src/components/UI/Box.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="box">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Box"
+}
+</script>
+
+<style scoped>
+.box {
+  display: flex;
+  background: white;
+  border-radius: 0.8rem;
+  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
+  position: relative;
+  padding: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/UI/Dropdown.vue b/src/frontend/src/components/UI/Dropdown.vue
new file mode 100644
index 0000000..71d4e60
--- /dev/null
+++ b/src/frontend/src/components/UI/Dropdown.vue
@@ -0,0 +1,351 @@
+<template>
+  <div class="dropdown" ref="dropdown">
+    <button
+        ref="trigger"
+        class="dropdown-trigger"
+        :class="{ 'dropdown-trigger--open': isOpen }"
+        @click="toggleDropdown"
+        @keydown="handleTriggerKeydown"
+    >
+      <span class="dropdown-trigger-text">
+        {{ selectedOption ? selectedOption[displayKey] : placeholder }}
+      </span>
+      <svg
+          class="dropdown-trigger-icon"
+          :class="{ 'dropdown-trigger-icon--rotated': isOpen }"
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+      >
+        <polyline points="6,9 12,15 18,9"></polyline>
+      </svg>
+    </button>
+
+    <transition name="dropdown-fade">
+      <ul
+          v-if="isOpen"
+          ref="menu"
+          class="dropdown-menu"
+          @keydown="handleMenuKeydown"
+          tabindex="-1"
+      >
+        <li
+            v-for="(option, index) in options"
+            :key="option[valueKey]"
+            class="dropdown-option"
+            :class="{
+            'dropdown-option--selected': isSelected(option),
+            'dropdown-option--focused': focusedIndex === index
+          }"
+            @click="selectOption(option)"
+            @mouseenter="focusedIndex = index"
+        >
+          {{ option[displayKey] }}
+        </li>
+        <li v-if="options.length === 0" class="dropdown-option dropdown-option--empty">
+          {{ emptyText }}
+        </li>
+      </ul>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dropdown',
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    modelValue: {
+      type: [String, Number, Object],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: 'Select an option'
+    },
+    displayKey: {
+      type: String,
+      default: 'value'
+    },
+    valueKey: {
+      type: String,
+      default: 'id'
+    },
+    emptyText: {
+      type: String,
+      default: 'No options available'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  data() {
+    return {
+      isOpen: false,
+      focusedIndex: -1,
+      labelId: `dropdown-${Math.random().toString(36).substr(2, 9)}`
+    }
+  },
+  computed: {
+    selectedOption() {
+      if (!this.modelValue) return null
+      return this.options.find(option =>
+          option[this.valueKey] === this.modelValue
+      )
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside)
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside)
+  },
+  methods: {
+    toggleDropdown() {
+      if (this.disabled) return
+
+      this.isOpen = !this.isOpen
+
+      if (this.isOpen) {
+        this.$nextTick(() => {
+          this.$refs.menu?.focus()
+          this.focusedIndex = this.selectedOption ?
+              this.options.findIndex(option => option[this.valueKey] === this.modelValue) :
+              0
+        })
+      } else {
+        this.focusedIndex = -1
+      }
+    },
+    selectOption(option) {
+      this.$emit('update:modelValue', option[this.valueKey])
+      this.$emit('change', option)
+      this.closeDropdown()
+      this.$refs.trigger.focus()
+    },
+    closeDropdown() {
+      this.isOpen = false
+      this.focusedIndex = -1
+    },
+    isSelected(option) {
+      return this.modelValue === option[this.valueKey]
+    },
+    handleClickOutside(event) {
+      if (!this.$refs.dropdown?.contains(event.target)) {
+        this.closeDropdown()
+      }
+    },
+    handleTriggerKeydown(event) {
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+        case 'ArrowDown':
+          event.preventDefault()
+          if (!this.isOpen) {
+            this.toggleDropdown()
+          }
+          break
+        case 'ArrowUp':
+          event.preventDefault()
+          if (!this.isOpen) {
+            this.toggleDropdown()
+          }
+          break
+        case 'Escape':
+          if (this.isOpen) {
+            event.preventDefault()
+            this.closeDropdown()
+          }
+          break
+      }
+    },
+    handleMenuKeydown(event) {
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault()
+          this.focusedIndex = Math.min(this.focusedIndex + 1, this.options.length - 1)
+          break
+        case 'ArrowUp':
+          event.preventDefault()
+          this.focusedIndex = Math.max(this.focusedIndex - 1, 0)
+          break
+        case 'Enter':
+          event.preventDefault()
+          if (this.focusedIndex >= 0 && this.options[this.focusedIndex]) {
+            this.selectOption(this.options[this.focusedIndex])
+          }
+          break
+        case 'Escape':
+          event.preventDefault()
+          this.closeDropdown()
+          this.$refs.trigger.focus()
+          break
+        case 'Tab':
+          this.closeDropdown()
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dropdown {
+  position: relative;
+  display: flex;
+  flex: 1 0 auto;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 0.4rem;
+  padding: 0.6rem 1.2rem;
+  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
+  border: 0.2rem solid #E3EDFF;
+  transition: all 0.1s ease;
+  flex: 1 0 auto;
+  font: inherit;
+}
+
+.dropdown-trigger:hover {
+  background: #EEF4FF;
+  border: 0.2rem solid #8DB3FE;
+  /*transform: translateY(2px);*/
+  transform: scale(1.01);
+}
+
+
+.dropdown-trigger--open {
+  border: 0.2rem solid #8DB3FE;
+  background: #EEF4FF;
+}
+
+.dropdown-trigger-text {
+  flex: 1;
+  text-align: left;
+  color: #2d3748;
+  font: inherit;
+}
+
+.dropdown-trigger-icon {
+  transition: transform 0.2s ease;
+  color: #718096;
+}
+
+.dropdown-trigger-icon--rotated {
+  transform: rotate(180deg);
+}
+
+.dropdown-menu {
+  font: inherit;
+  outline: none;
+  list-style: none;
+  color: #2d3748;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 0;
+  background: white;
+  border: 0.1rem solid #E3EDFF;
+  border-radius: 0.8rem;
+  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  z-index: 1000;
+  max-height: 50rem;
+  overflow-y: auto;
+  margin-top: 0.4rem;
+}
+
+.dropdown-option {
+  font: inherit;
+  padding: 1.2rem 1.6rem;
+  cursor: pointer;
+  border-bottom: 0.16rem solid #f3f4f6;
+  transition: background-color 0.2s ease;
+  color: #2d3748;
+  background: none;
+}
+
+.dropdown-option:last-child {
+  border-bottom: none;
+}
+
+.dropdown-option:hover,
+.dropdown-option--focused {
+  background-color: rgba(107, 134, 156, 0.05);
+}
+
+.dropdown-option--selected {
+  color: #2d3748;
+  background: none;
+}
+
+.dropdown-option--selected:hover,
+.dropdown-option--selected.dropdown-option--focused {
+  color: #2d3748;
+  background-color: rgba(107, 134, 156, 0.05);
+}
+
+.dropdown-option--empty {
+  color: #001D33;
+  cursor: default;
+}
+
+.dropdown-option--empty:hover {
+  background-color: transparent;
+}
+
+/* Transition animations */
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+  transition: all 0.15s ease;
+}
+
+.dropdown-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.dropdown-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+/* Disabled state */
+.dropdown-trigger:disabled {
+  background-color: #f7fafc;
+  color: #a0aec0;
+  cursor: not-allowed;
+  border-color: #e2e8f0;
+}
+
+.dropdown-trigger:disabled:hover {
+  border-color: #e2e8f0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .dropdown-trigger {
+    padding: 10px 12px;
+    font-size: 14px;
+  }
+
+  .dropdown-option {
+    padding: 10px 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/UI/Flag.vue b/src/frontend/src/components/UI/Flag.vue
index 3b9140b..edfe7cd 100644
--- a/src/frontend/src/components/UI/Flag.vue
+++ b/src/frontend/src/components/UI/Flag.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flag-container">
     <img :src="path" :alt="iso" :class="flagSizeClass">
   </div>
 </template>
@@ -31,6 +31,12 @@ export default {
 </script>
 
 <style scoped>
+
+.flag-container {
+  display: flex;
+  align-items: center;
+}
+
 .flag-s {
   height: 1.2rem; /* 12px */
 }
diff --git a/src/frontend/src/components/UI/InputField.vue b/src/frontend/src/components/UI/InputField.vue
new file mode 100644
index 0000000..ffdfdbb
--- /dev/null
+++ b/src/frontend/src/components/UI/InputField.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="input-field-container">
+    <input class="input-field"
+           v-model="modelValue"
+           :placeholder="placeholder"
+           autocomplete="off"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InputField",
+  props: {
+    name: 'InputField',
+    props: {
+      modelValue: {
+        type: String,
+        default: ''
+      }
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue']
+}
+</script>
+
+
+<style scoped>
+
+.input-field {
+  border: none;
+  outline: none;
+  background: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 1.4rem;
+  color: #002F54;
+}
+
+.input-field-container {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 0.4rem;
+  padding: 0.6rem 1.2rem;
+  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
+  border: 0.2rem solid #E3EDFF;
+  transition: all 0.1s ease;
+  flex: 1 0 auto;
+}
+
+.input-field-container:hover {
+  background: #EEF4FF;
+  border: 0.2rem solid #8DB3FE;
+  /*transform: translateY(2px);*/
+  transform: scale(1.01);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/UI/Modal.vue b/src/frontend/src/components/UI/Modal.vue
new file mode 100644
index 0000000..e1d64bf
--- /dev/null
+++ b/src/frontend/src/components/UI/Modal.vue
@@ -0,0 +1,117 @@
+<template>
+  <teleport to="body">
+    <transition name="modal" appear>
+      <div
+          v-if="isVisible"
+          class="modal-overlay"
+          @click="closeOnBackdrop && close()"
+          @keydown.esc="closeOnEscape && close()"
+          tabindex="-1"
+          ref="modalOverlay"
+      >
+        <box @click.stop>
+          <slot></slot>
+        </box>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script>
+import Box from "@/components/UI/Box.vue";
+
+export default {
+  name: "Modal",
+  components: {Box},
+  props: {
+    state: {
+      type: Boolean,
+      default: false
+    },
+    closeOnBackdrop: {
+      type: Boolean,
+      default: true
+    },
+    closeOnEscape: {
+      type: Boolean,
+      default: true
+    },
+  },
+  emits: ['close'],
+  computed: {
+    isVisible() {
+      return this.state;
+    }
+  },
+  watch: {
+    isVisible(newVal) {
+      if (newVal) {
+        this.handleOpen();
+      } else {
+        this.handleClose();
+      }
+    }
+  },
+  mounted() {
+    if (this.isVisible) {
+      this.handleOpen();
+    }
+  },
+  beforeUnmount() {
+    this.handleClose();
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    handleOpen() {
+      this.$nextTick(() => {
+        if (this.$refs.modalOverlay) {
+          this.$refs.modalOverlay.focus();
+        }
+      });
+    },
+    handleClose() {
+    }
+  }
+};
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+/* Transition animations */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active .box,
+.modal-leave-active .box {
+  transition: transform 0.3s ease;
+}
+
+.modal-enter-from .box,
+.modal-leave-to .box {
+  transform: scale(0.9) translateY(-10px);
+}
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/UI/ModalDialog.vue b/src/frontend/src/components/UI/ModalDialog.vue
new file mode 100644
index 0000000..25616c8
--- /dev/null
+++ b/src/frontend/src/components/UI/ModalDialog.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <modal :state="state">
+      <div class="modal-dialog">
+        <div class="modal-dialog-title sub-header">{{ title }}</div>
+        <div class="modal-dialog-message">{{ message }}</div>
+        <div class="modal-dialog-actions">
+          <basic-button :show-icon="false" @click="action('accept')">{{ acceptText }}</basic-button>
+          <basic-button :show-icon="false" @click="action('deny')" v-if="denyText!=null">{{ denyText }}</basic-button>
+          <basic-button :show-icon="false" @click="action('dismiss')" variant="secondary">{{ dismissText }}</basic-button>
+        </div>
+      </div>
+    </modal>
+  </div>
+</template>
+
+<script>
+
+
+import BasicButton from "@/components/UI/BasicButton.vue";
+import Modal from "@/components/UI/Modal.vue";
+
+export default {
+  name: "ModalDialog",
+  components: {Modal, BasicButton},
+  emits: ['click'],
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    message: {
+      type: String,
+      required: true
+    },
+    denyText: {
+      type: String,
+      required: false,
+      default: null
+    },
+    acceptText: {
+      type: String,
+      required: false,
+      default: 'OK'
+    },
+    dismissText: {
+      type: String,
+      required: false,
+      default: 'Cancel'
+    },
+    state: {
+      type: Boolean,
+      required: true
+    }
+  },
+  methods: {
+    action(action) {
+      this.$emit('click', action);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.modal-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+
+.modal-dialog-title {
+  font-weight: normal;
+  font-size: 1.4rem;
+  color: #6B869C;
+}
+
+.modal-dialog-message {
+  display: flex;
+  font-size: 1.4rem;
+  max-width: 60rem;
+}
+
+.modal-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1.6rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/UI/Spinner.vue b/src/frontend/src/components/UI/Spinner.vue
index 1663007..c672419 100644
--- a/src/frontend/src/components/UI/Spinner.vue
+++ b/src/frontend/src/components/UI/Spinner.vue
@@ -2,31 +2,67 @@
 import {defineComponent} from 'vue'
 
 export default defineComponent({
-  name: "Spinner"
+  name: "Spinner",
+  props: {
+    size: {
+      type: String as () => 's' | 'm',
+      default: 'm',
+      validator: (value: string) => ['s', 'm'].includes(value)
+    }
+  },
+  computed: {
+    loaderClass() {
+      return `loader loader--${this.size}`
+    }
+  }
 })
 </script>
 
 <template>
-  <span class="loader"></span>
+  <span :class="loaderClass"></span>
 </template>
 
 <style scoped>
 .loader {
-  width: 48px;
-  height: 48px;
-  border: 5px solid #6B869C;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;
   position: relative;
   animation: pulse 1s linear infinite;
+  border-color: #6B869C;
 }
+
+/* Medium size (default) */
+.loader--m {
+  width: 4.8rem;
+  height: 4.8rem;
+  border-width: 0.5rem;
+}
+
+.loader--m:after {
+  width: 4.8rem;
+  height: 4.8rem;
+  border-width: 0.5rem;
+}
+
+/* Small size */
+.loader--s {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-width: 0.3rem;
+}
+
+.loader--s:after {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-width: 0.3rem;
+}
+
 .loader:after {
   content: '';
   position: absolute;
-  width: 48px;
-  height: 48px;
-  border: 5px solid #6B869C;
+  border-color: #6B869C;
+  border-style: solid;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;
@@ -38,10 +74,10 @@ export default defineComponent({
 
 @keyframes scaleUp {
   0% { transform: translate(-50%, -50%) scale(0) }
-  60% , 100% { transform: translate(-50%, -50%)  scale(1)}
+  60% , 100% { transform: translate(-50%, -50%) scale(1)}
 }
 @keyframes pulse {
-  0% , 60% , 100%{ transform:  scale(1) }
-  80% { transform:  scale(1.2)}
+  0% , 60% , 100%{ transform: scale(1) }
+  80% { transform: scale(1.2)}
 }
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/components/UI/Tooltip.vue b/src/frontend/src/components/UI/Tooltip.vue
index ff2fcae..eb39535 100644
--- a/src/frontend/src/components/UI/Tooltip.vue
+++ b/src/frontend/src/components/UI/Tooltip.vue
@@ -88,7 +88,6 @@ export default {
 .tooltip-wrapper {
   position: relative;
   display: flex;
-  flex: 0 0 auto;
 }
 
 .tooltip {
diff --git a/src/frontend/src/components/layout/TheHeader.vue b/src/frontend/src/components/layout/TheHeader.vue
index 074e17b..da3d272 100644
--- a/src/frontend/src/components/layout/TheHeader.vue
+++ b/src/frontend/src/components/layout/TheHeader.vue
@@ -3,7 +3,7 @@
     <img alt="LCC logo" class="logo" src="../../assets/logo.svg" width="125" height="125" />
     <nav>
       <ul>
-        <li><navigation-element class="navigationbox" to="/calculations">Calculation</navigation-element></li>
+        <li><navigation-element class="navigationbox" to="/calculations">My Calculation</navigation-element></li>
         <li><navigation-element class="navigationbox" to="/reports">Reporting</navigation-element></li>
         <li><navigation-element class="navigationbox" to="/config">Configuration</navigation-element></li>
       </ul>
diff --git a/src/frontend/src/components/layout/TheNewSupplierDialog.vue b/src/frontend/src/components/layout/TheNewSupplierDialog.vue
deleted file mode 100644
index a187e82..0000000
--- a/src/frontend/src/components/layout/TheNewSupplierDialog.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-  name: "TheNewSupplierDialog"
-})
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/assistant/MaterialItem.vue b/src/frontend/src/components/layout/assistant/MaterialItem.vue
index b8761d1..a88b05b 100644
--- a/src/frontend/src/components/layout/assistant/MaterialItem.vue
+++ b/src/frontend/src/components/layout/assistant/MaterialItem.vue
@@ -1,15 +1,71 @@
-<script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-  name: "MaterialItem"
-})
-</script>
 
 <template>
-
+  <div class="item-container">
+    <div class="material-item-text">
+      <div class="supplier-item-name">{{name}}</div>
+      <div class="supplier-item-address">{{partNumber}}</div>
+    </div>
+    <icon-button icon="trash" @click="deleteClick"></icon-button>
+  </div>
 </template>
 
+<script>
+
+import IconButton from "@/components/UI/IconButton.vue";
+
+export default {
+  name: "MaterialItem",
+  components: {IconButton},
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    partNumber: {
+      type: String,
+      required: true
+    },
+    id: {
+      type: Number,
+      required: true
+    }
+  },
+  methods: {
+    deleteClick() {
+      this.$emit("delete", this.id);
+    }
+  }
+}
+</script>
+
 <style scoped>
 
+.item-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 3.6rem 3.6rem;
+  background: white;
+  border-radius: 0.8rem;
+  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  gap: 2.4rem;
+  flex: 0 0 50rem
+}
+
+.item-container:hover {
+  background-color: rgba(107, 134, 156, 0.05);
+}
+
+.supplier-item-name {
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #001D33
+}
+
+.supplier-item-address {
+  font-size: 1.4rem;
+  color: #6b7280;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/assistant/SupplierItem.vue b/src/frontend/src/components/layout/assistant/SupplierItem.vue
index 5c9985a..3a93e8d 100644
--- a/src/frontend/src/components/layout/assistant/SupplierItem.vue
+++ b/src/frontend/src/components/layout/assistant/SupplierItem.vue
@@ -1,15 +1,93 @@
-<script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-  name: "SupplierItem"
-})
-</script>
 
 <template>
+  <div class="item-container">
+    <flag :iso="isoCode" size="l"></flag>
+    <div class="supplier-item-text">
+      <div class="supplier-item-name"> <span class="user-icon" v-if="isUserSupplier"><ph-user weight="fill" ></ph-user></span> {{name}}</div>
+      <div class="supplier-item-address">{{ address }}</div>
 
+    </div>
+    <icon-button icon="trash" @click="deleteClick"></icon-button>
+  </div>
 </template>
 
+<script>
+
+import IconButton from "@/components/UI/IconButton.vue";
+import Flag from "@/components/UI/Flag.vue";
+import {PhStar, PhUser} from "@phosphor-icons/vue";
+
+export default {
+  name: "SupplierItem",
+  components: {PhUser, PhStar, Flag, IconButton},
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    address: {
+      type: String,
+      required: true
+    },
+    isoCode: {
+      type: String,
+      required: true
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    isUserSupplier: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  methods: {
+    deleteClick() {
+      this.$emit("delete", this.id);
+    }
+  }
+}
+</script>
+
 <style scoped>
 
+.item-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 3.6rem 3.6rem;
+  background: white;
+  border-radius: 0.8rem;
+  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  gap: 2.4rem;
+  flex: 0 0 50rem
+}
+
+.item-container:hover {
+  background-color: rgba(107, 134, 156, 0.02);
+}
+
+.user-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+
+.supplier-item-name {
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #001D33;
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.supplier-item-address {
+  font-size: 1.4rem;
+  color: #6b7280;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/assistant/TheDropPartNumbersDialog.vue b/src/frontend/src/components/layout/assistant/TheDropPartNumbersDialog.vue
deleted file mode 100644
index 52af559..0000000
--- a/src/frontend/src/components/layout/assistant/TheDropPartNumbersDialog.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-  name: "TheDropPartNumbersDialog"
-})
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/calculation/TheCalculationSearch.vue b/src/frontend/src/components/layout/calculation/TheCalculationSearch.vue
index e2a9383..a835b96 100644
--- a/src/frontend/src/components/layout/calculation/TheCalculationSearch.vue
+++ b/src/frontend/src/components/layout/calculation/TheCalculationSearch.vue
@@ -74,6 +74,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 24px;
+  flex: 1 1 auto;
 }
 
 
@@ -81,18 +82,18 @@ export default {
   display: flex;
   align-items: center;
   background: white;
-  border-radius: 8px;
-  padding: 6px 12px;
+  border-radius: 0.4rem;
+  padding: 0.6rem 1.2rem;
   /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);*/
-  border: 2px solid #E3EDFF;
+  border: 0.2rem solid #E3EDFF;
   transition: all 0.1s ease;
-  flex: 1 0 auto;
+  flex: 1 1 auto;
 }
 
 .search-wrapper:hover {
   background: #EEF4FF;
-  border: 2px solid #8DB3FE;
+  border: 0.2rem solid #8DB3FE;
   /*transform: translateY(2px);*/
   transform: scale(1.01);
 }
@@ -103,18 +104,18 @@ export default {
 //} */
 
 .search-icon {
-  width: 18px;
-  height: 18px;
-  margin-right: 12px;
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 1.2rem;
   color: #6B869C;
   flex-shrink: 0;
 }
 
 .search-input {
-  flex: 1;
+  flex: 1 1 auto;
   border: none;
   outline: none;
-  font-size: 14px;
+  font-size: 1.4rem;
   color: #002F54;
   background: transparent;
   font-weight: 400;
diff --git a/src/frontend/src/components/layout/edit/DestinationListView.vue b/src/frontend/src/components/layout/edit/DestinationListView.vue
new file mode 100644
index 0000000..d4ba07d
--- /dev/null
+++ b/src/frontend/src/components/layout/edit/DestinationListView.vue
@@ -0,0 +1,16 @@
+<template>
+  DestinationListView
+</template>
+
+<script>
+
+
+export default {
+  name: "DestinationListView",
+}
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/edit/MaterialEdit.vue b/src/frontend/src/components/layout/edit/MaterialEdit.vue
new file mode 100644
index 0000000..5ffa40a
--- /dev/null
+++ b/src/frontend/src/components/layout/edit/MaterialEdit.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="container">
+    <div class="caption-column">Part number</div>
+    <div class="input-column">
+      <autosuggest-searchbar v-if="editMode" :fetch-suggestions="fetchPartNumbers" :initial-value="partNumber"
+                             placeholder="Find part number"></autosuggest-searchbar>
+      <span v-else>{{ partNumber }}</span>
+      <modal-dialog :state="modalDialogPartNumberState"
+                    accept-text="Yes"
+                    deny-text="No"
+                    @click="modalDialogClick"
+                    message="You have changed the part number. Your current master data (like packaging dimensions) might be outdated. Do you want to reload master data?"
+                    title="Update master data"></modal-dialog>
+      <icon-button :icon="editIconPartNumber" @click="toggleEditMode"></icon-button>
+    </div>
+    <div class="caption-column">Description</div>
+    <div class="input-column">
+      <span>{{ description }}</span>
+    </div>
+    <div class="caption-column">HS code</div>
+    <div class="input-column">
+      <autosuggest-searchbar v-if="!editMode" :fetch-suggestions="fetchHsCode" :initial-value="hsCode"
+                             placeholder="Find hs code"></autosuggest-searchbar>
+      <div v-else>{{ hsCode }}</div>
+      <div class="caption-column">Tariff rate [%]</div>
+      <div v-if="!editMode" class="input-field-container input-field-tariffrate">
+        <input v-model="tariffRate" class="input-field"
+               autocomplete="off"/>
+      </div>
+      <span v-else>{{ tariffRate }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+import IconButton from "@/components/UI/IconButton.vue";
+import Flag from "@/components/UI/Flag.vue";
+import InputField from "@/components/UI/InputField.vue";
+import AutosuggestSearchbar from "@/components/UI/AutoSuggestSearchBar.vue";
+import ModalDialog from "@/components/UI/ModalDialog.vue";
+
+export default {
+  name: "MaterialEdit",
+  components: {ModalDialog, AutosuggestSearchbar, InputField, Flag, IconButton},
+  props: {},
+  computed: {
+    editIconPartNumber() {
+      return this.editMode ? "check" : "pencil-simple";
+    }
+  },
+  data() {
+    return {
+      partNumber: "28152640129",
+      description: "gearbox housing blank 'GR4H-10",
+      hsCode: "87111000",
+      tariffRate: 0.05,
+      editMode: false,
+      modalDialogPartNumberState: false,
+    }
+  },
+  methods: {
+    modalDialogClick(action) {
+      console.log(action);
+      this.modalDialogPartNumberState = false;
+
+    },
+    toggleEditMode() {
+      if(this.editMode) {
+        this.modalDialogPartNumberState = true;
+      } else {
+        this.editMode = true;
+      }
+    },
+    fetchPartNumbers(query) {
+      return [1, 2, 3];
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+.container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(3, fit-content(0));
+  gap: 1.6rem;
+  flex: 1 1 auto;
+}
+
+.input-column {
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+  font-size: 1.4rem;
+  font-weight: 300;
+  color: #6b7280;
+  gap: 1.6rem;
+}
+
+.input-field {
+  border: none;
+  outline: none;
+  background: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 1.4rem;
+  color: #002F54;
+  width: 100%;
+}
+
+.input-field-container {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 0.4rem;
+  padding: 0.6rem 1.2rem;
+  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
+  border: 0.2rem solid #E3EDFF;
+  transition: all 0.1s ease;
+  flex: 1 1 auto;
+}
+
+.input-field-container:hover {
+  background: #EEF4FF;
+  border: 0.2rem solid #8DB3FE;
+  /*transform: translateY(2px);*/
+  transform: scale(1.01);
+}
+
+.caption-column {
+  font-size: 1.2rem;
+  font-weight: 500;
+  align-self: center;
+  justify-self: end;
+  color: #001D33;
+  text-wrap: nowrap;
+}
+
+.input-field-tariffrate {
+  min-width: 7rem;
+  flex: 0 1 10rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/edit/PackagingEdit.vue b/src/frontend/src/components/layout/edit/PackagingEdit.vue
new file mode 100644
index 0000000..886cdc8
--- /dev/null
+++ b/src/frontend/src/components/layout/edit/PackagingEdit.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="container">
+    <div class="caption-column">Length</div>
+    <div class="input-column">
+      <div class="input-field-container">
+        <input v-model="huLength" class="input-field"
+               autocomplete="off"/>
+      </div>
+    </div>
+    <div class="caption-column">Dimension Unit</div>
+    <div class="input-column">
+      <dropdown :options="huDimensionUnits" v-model="huDimensionUnitSelected"></dropdown>
+    </div>
+
+
+    <div class="caption-column">Width</div>
+    <div class="input-column">
+      <div class="input-field-container">
+        <input v-model="huWidth" class="input-field"
+               autocomplete="off"/>
+      </div>
+    </div>
+    <div class="caption-column"></div>
+    <div class="input-column"></div>
+
+
+    <div class="caption-column">Height</div>
+    <div class="input-column">
+      <div class="input-field-container">
+        <input v-model="huHeight" class="input-field"
+               autocomplete="off"/>
+      </div>
+    </div>
+    <div class="caption-column"></div>
+    <div class="input-column"></div>
+
+
+    <div class="caption-column">Weight</div>
+    <div class="input-column">
+      <div class="input-field-container">
+        <input v-model="huWeight" class="input-field"
+               autocomplete="off"/>
+      </div>
+    </div>
+    <div class="caption-column">Weight Unit</div>
+    <div class="input-column">
+      <dropdown :options="huWeightUnits" v-model="huWeightUnitSelected"></dropdown>
+    </div>
+
+
+    <div class="caption-column">Pieces per HU</div>
+    <div class="input-column">
+      <tooltip text="Single pieces per HU">
+      <div class="input-field-container">
+        <input v-model="huCount" class="input-field"
+               autocomplete="off"/>
+      </div>
+      </tooltip>
+    </div>
+
+    <div class="input-column-chk">
+      <tooltip position="left" text="Deselect if the handling unit cannot be stacked">
+        <checkbox>stackable</checkbox>
+      </tooltip>
+      <tooltip position="left" text="Deselect if the handling unit cannot be transported together with other handling units">
+        <checkbox>mixable</checkbox>
+      </tooltip>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+
+import Checkbox from "@/components/UI/Checkbox.vue";
+import Dropdown from "@/components/UI/Dropdown.vue";
+import Tooltip from "@/components/UI/Tooltip.vue";
+
+export default {
+  name: "PackagingEdit",
+  components: {Tooltip, Dropdown, Checkbox},
+  props: {},
+  data() {
+    return {
+      huLength: 0.0,
+      huWidth: 0.0,
+      huHeight: 0.0,
+      huWeight: 0.0,
+      huWeightUnit: "kg",
+      huCount: 1,
+      huDimensionUnitSelected: 1,
+      huDimensionUnits: [{id: 1, value: "CM"}, {id: 2, value: "MM"}, {id: 3, value: "M"}],
+      huWeightUnitSelected: 1,
+      huWeightUnits: [{id: 1, value: "KG"}, {id: 2, value: "G"}, {id: 3, value: "T"}],
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  grid-template-rows: repeat(5, fit-content(0));
+  gap: 1.6rem;
+  flex: 1 1 auto;
+}
+
+.input-field {
+  border: none;
+  outline: none;
+  background: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 1.4rem;
+  color: #002F54;
+  width: 100%;
+  min-width: 5rem;
+  max-width: 10rem;
+}
+
+.input-column-chk {
+  display: flex;
+  justify-content: flex-end;
+  align-self: center;
+  grid-column: -3/-1;
+  gap: 1.6rem;
+  flex: 1 1 auto;
+}
+
+
+.input-column {
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+  font-size: 1.4rem;
+  font-weight: 300;
+  color: #6b7280;
+}
+
+.input-field-container {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 0.4rem;
+  padding: 0.6rem 1.2rem;
+  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
+  border: 0.2rem solid #E3EDFF;
+  transition: all 0.1s ease;
+  flex: 1 1 min-content;
+
+}
+
+.input-field-container:hover {
+  background: #EEF4FF;
+  border: 0.2rem solid #8DB3FE;
+  /*transform: translateY(2px);*/
+  transform: scale(1.01);
+}
+
+.caption-column {
+  font-size: 1.2rem;
+  font-weight: 500;
+  align-self: center;
+  justify-self: end;
+  color: #001D33;
+  text-wrap: nowrap;
+}
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/edit/PriceEdit.vue b/src/frontend/src/components/layout/edit/PriceEdit.vue
new file mode 100644
index 0000000..a1a624a
--- /dev/null
+++ b/src/frontend/src/components/layout/edit/PriceEdit.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="container">
+    <div class="caption-column">MEK_A [EUR]</div>
+    <div class="input-column">
+      <div class="input-field-container">
+        <input v-model="price" class="input-field"
+               autocomplete="off"/>
+      </div>
+    </div>
+    <div class="caption-column">Oversea share [%]</div>
+    <div class="input-column">
+      <div class="input-field-container">
+        <input v-model="overSeashare" class="input-field"
+               autocomplete="off"/>
+      </div>
+    </div>
+    <div class="caption-column">Include FCA Fee</div>
+    <div class="input-column">
+      <tooltip text="Select if a additional FCA has to be added during calculation"><checkbox></checkbox></tooltip>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+
+import Checkbox from "@/components/UI/Checkbox.vue";
+import Tooltip from "@/components/UI/Tooltip.vue";
+
+export default {
+  name: "PriceEdit",
+  components: {Tooltip, Checkbox},
+  props: {},
+  data() {
+    return {
+      price: 0.0,
+      overSeashare: 0.0,
+      addFcaFee: false
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+
+<style scoped>
+
+.container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  gap: 1.6rem;
+  flex: 1 1 auto;
+}
+
+.input-field {
+  border: none;
+  outline: none;
+  background: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 1.4rem;
+  color: #002F54;
+  width: 100%;
+  min-width: 5rem;
+}
+
+
+.input-column {
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+  font-size: 1.4rem;
+  font-weight: 300;
+  color: #6b7280;
+  flex: 1 1 auto;
+}
+
+.input-field-container {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 0.4rem;
+  padding: 0.6rem 1.2rem;
+  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
+  border: 0.2rem solid #E3EDFF;
+  transition: all 0.1s ease;
+  flex: 1 1 fit-content(80rem);
+}
+
+.input-field-container:hover {
+  background: #EEF4FF;
+  border: 0.2rem solid #8DB3FE;
+  /*transform: translateY(2px);*/
+  transform: scale(1.01);
+}
+
+.caption-column {
+  font-size: 1.2rem;
+  font-weight: 500;
+  align-self: center;
+  justify-self: end;
+  color: #001D33;
+  text-wrap: nowrap;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/edit/SupplierView.vue b/src/frontend/src/components/layout/edit/SupplierView.vue
new file mode 100644
index 0000000..1a97b3e
--- /dev/null
+++ b/src/frontend/src/components/layout/edit/SupplierView.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="container">
+    <div class="caption-column">Supplier</div>
+    <div class="input-field input-field-name"><span class="user-icon" v-if="isUserSupplier"><ph-user
+        weight="fill"></ph-user></span> {{ supplierName }}
+    </div>
+    <div class="caption-column">Address</div>
+    <div class="input-field input-field-address">
+      <div class="supplier-flag">
+        <flag iso="CN"/>
+      </div>
+      <div class="supplier-address">{{ supplierAddress }}</div>
+    </div>
+    <div class="caption-column">Coordinates</div>
+    <div class="input-field">{{ coordinatesDMS }}</div>
+    <div class="footer">
+      <icon-button icon="pencil-simple"></icon-button>
+    </div>
+  </div>
+</template>
+<script>
+
+
+import IconButton from "@/components/UI/IconButton.vue";
+import InputField from "@/components/UI/InputField.vue";
+import Flag from "@/components/UI/Flag.vue";
+import {PhUser} from "@phosphor-icons/vue";
+
+export default {
+  name: "SupplierView",
+  components: {PhUser, Flag, InputField, IconButton},
+  props: {
+    supplierName: {
+      type: String,
+      required: true
+    },
+    supplierAddress: {
+      type: String,
+      required: true
+    },
+    supplierCoordinates: {
+      type: Object,
+      required: false,
+      default: null
+
+    },
+    isUserSupplier: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  computed: {
+
+    // Kombinierte Ausgabe beider Koordinaten
+    coordinatesDMS() {
+      return `${this.convertToDMS(this.supplierCoordinates?.lat, 'lat')}, ${this.convertToDMS(this.supplierCoordinates?.lng, 'lng')}`;
+    }
+  },
+  methods: {
+    convertToDMS(coordinate, type) {
+
+      if (!coordinate)
+        return '';
+
+      let direction;
+      if (type === 'lat') {
+        direction = coordinate >= 0 ? 'N' : 'S';
+      } else {
+        direction = coordinate >= 0 ? 'E' : 'W';
+      }
+
+      // Arbeite mit Absolutwert
+      const abs = Math.abs(coordinate);
+
+      // Grad (ganzzahliger Teil)
+      const degrees = Math.floor(abs);
+
+      // Minuten
+      const minutesFloat = (abs - degrees) * 60;
+      const minutes = minutesFloat.toFixed(4);
+
+
+      return `${degrees}° ${minutes}' ${direction}`;
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+.supplier-address {
+  font-size: 1.4rem;
+  color: #6b7280;
+  max-width: 30rem;
+}
+
+.user-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.input-field-name {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+  flex: 0 1 10rem
+}
+
+.input-field-address {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.caption-column {
+  font-size: 1.2rem;
+  font-weight: 500;
+  align-self: center;
+  justify-self: end;
+  color: #001D33
+}
+
+.input-field {
+  align-self: center;
+  font-size: 1.4rem;
+  color: #6b7280;
+}
+
+.container {
+  flex: 1 1 auto;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(3, fit-content(0)) auto;
+  gap: 1.6rem;
+}
+
+.footer {
+  grid-column: 1/-1;
+  justify-self: end;
+  align-self: end;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/edit/destination/DestinationEdit.vue b/src/frontend/src/components/layout/edit/destination/DestinationEdit.vue
new file mode 100644
index 0000000..26a63f9
--- /dev/null
+++ b/src/frontend/src/components/layout/edit/destination/DestinationEdit.vue
@@ -0,0 +1,16 @@
+<template>
+  DestinationEdit
+</template>
+
+<script>
+
+
+export default {
+  name: "DestinationEdit",
+}
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/edit/destination/DestinationItem.vue b/src/frontend/src/components/layout/edit/destination/DestinationItem.vue
new file mode 100644
index 0000000..4cb6403
--- /dev/null
+++ b/src/frontend/src/components/layout/edit/destination/DestinationItem.vue
@@ -0,0 +1,16 @@
+<template>
+  DestinationItem
+</template>
+
+<script>
+
+
+export default {
+  name: "DestinationItem",
+}
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/node/CreateNewNode.vue b/src/frontend/src/components/layout/node/CreateNewNode.vue
new file mode 100644
index 0000000..0357e90
--- /dev/null
+++ b/src/frontend/src/components/layout/node/CreateNewNode.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="create-new-node-container">
+    <h3 class="sub-header">Create new supplier</h3>
+    <form @submit.prevent="send">
+      <div class="create-new-node-form-container">
+        <div class="input-field-caption">Name:</div>
+        <div><div class="input-field-container"><input class="input-field" v-model="nodeName"/></div></div>
+        <div></div>
+        <div class="input-field-caption">Address:</div>
+        <div><div class="input-field-container"><input class="input-field" v-model="nodeAddress"/></div></div>
+        <div>
+          <basic-button icon="SealCheck">Verify address</basic-button>
+        </div>
+        <div class="input-field-caption">Coordinates:</div>
+        <div>{{ nodeCoordinates }}</div>
+      </div>
+      <div class="create-new-node-footer">
+        <basic-button variant="primary" :show-icon="false" :disabled="unverified">OK</basic-button>
+        <basic-button @click.prevent="cancel" variant="secondary" :show-icon="false">Cancel</basic-button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+
+import BasicButton from "@/components/UI/BasicButton.vue";
+
+export default {
+  name: "CreateNewNode",
+  components: {BasicButton},
+  data() {
+    return {
+      nodeName: "",
+      nodeAddress: "",
+      nodeCoordinates: "",
+      addressVerified: false
+    }
+  },
+  computed: {
+    unverified() {
+      return !this.addressVerified;
+    }
+  },
+  methods: {
+    send() {
+      console.log("Sending...");
+
+    },
+    cancel() {
+      this.$emit("close");
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.sub-header {
+  font-weight: normal;
+  font-size: 1.4rem;
+  color: #6B869C;
+  margin-bottom: 1.6rem;
+}
+
+.input-field-caption{
+  font-size: 1.2rem;
+  font-weight: 500;
+  align-self: center;
+  justify-self: end;
+  color: #001D33
+}
+
+.input-field {
+  border: none;
+  outline: none;
+  background: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 1.4rem;
+  color: #002F54;
+}
+
+.input-field-container {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 0.4rem;
+  padding: 0.6rem 1.2rem;
+  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
+  border: 0.2rem solid #E3EDFF;
+  transition: all 0.1s ease;
+  flex: 1 0 auto;
+}
+
+.input-field-container:hover {
+  background: #EEF4FF;
+  border: 0.2rem solid #8DB3FE;
+  /*transform: translateY(2px);*/
+  transform: scale(1.01);
+}
+
+
+.create-new-node-container {
+  width: 60rem;
+}
+
+.create-new-node-footer {
+  display: flex;
+  gap: 1.6rem;
+  justify-content: flex-end;
+  margin-top: 2rem;
+}
+
+.create-new-node-form-container {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 1.6rem;
+
+}
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/main.js b/src/frontend/src/main.js
index dc23251..3b556d0 100644
--- a/src/frontend/src/main.js
+++ b/src/frontend/src/main.js
@@ -1,12 +1,33 @@
-
 import router from './router.js';
 //import store from './store/index.js';
-import { createApp } from 'vue'
-import { createPinia } from 'pinia';
+import {createApp} from 'vue'
+import {createPinia} from 'pinia';
 import App from './App.vue'
 
 
-import {PhX, PhTrain, PhTruckTrailer, PhBoat, PhPencilSimple, PhLock,PhLockOpen,PhWarning ,PhMagnifyingGlass, PhPlus, PhUpload, PhDownload, PhTrash, PhArchive, PhFloppyDisk, PhArrowBendUpLeft, PhCheck} from "@phosphor-icons/vue";
+import {
+    PhStar,
+    PhCalculator,
+    PhSealCheck,
+    PhCloudArrowUp,
+    PhX,
+    PhTrain,
+    PhTruckTrailer,
+    PhBoat,
+    PhPencilSimple,
+    PhLock,
+    PhLockOpen,
+    PhWarning,
+    PhMagnifyingGlass,
+    PhPlus,
+    PhUpload,
+    PhDownload,
+    PhTrash,
+    PhArchive,
+    PhFloppyDisk,
+    PhArrowCounterClockwise,
+    PhCheck
+} from "@phosphor-icons/vue";
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -21,7 +42,7 @@ app.component('PhMagnifyingGlass', PhMagnifyingGlass);
 app.component('PhTrash', PhTrash);
 app.component('PhArchive', PhArchive);
 app.component('PhFloppyDisk', PhFloppyDisk);
-app.component('PhArrowBendUpLeft', PhArrowBendUpLeft);
+app.component('PhArrowCounterClockwise', PhArrowCounterClockwise );
 app.component('PhCheck', PhCheck);
 app.component('PhWarning', PhWarning);
 app.component('PhLock', PhLock);
@@ -31,7 +52,10 @@ app.component('PhBoat', PhBoat);
 app.component('PhTrain', PhTrain);
 app.component('PhPencilSimple', PhPencilSimple);
 app.component('PhX', PhX);
-
+app.component('PhCloudArrowUp', PhCloudArrowUp);
+app.component('PhSealCheck', PhSealCheck);
+app.component('PhCalculator', PhCalculator);
+app.component('PhStar', PhStar);
 
 
 app.use(router);
diff --git a/src/frontend/src/pages/CalculationAssistant.vue b/src/frontend/src/pages/CalculationAssistant.vue
index 034605f..5002382 100644
--- a/src/frontend/src/pages/CalculationAssistant.vue
+++ b/src/frontend/src/pages/CalculationAssistant.vue
@@ -1,15 +1,240 @@
 <template>
-<h2 class="page-header">Start Calculation</h2>
+  <div class="start-calculation-container">
+    <h2 class="page-header">Create Calculation</h2>
+    <div class="part-numbers-headers">
+      <h3 class="sub-header">Part Numbers</h3>
+      <basic-button icon="CloudArrowUp" :showIcon="true" @click="activateModal('partNumber')">Drop part numbers</basic-button>
+    </div>
+
+    <ul class="item-list">
+      <li class="item-list-element" v-for="material in assistantStore.materials" :key="material.id">
+        <material-item :part-number="material['part_number']" :name="material.name" :id="material.id" @delete="deleteMaterial"></material-item>
+      </li>
+    </ul>
+
+    <modal :state="showPartNumberModal" @close="closeModal('partNumber')">
+      <div class="part-number-modal-container">
+        <h3 class="sub-header">Drop part numbers here</h3>
+        <div class="part-number-drop-container">
+          <textarea v-model="partNumberField" name="partNumbers" cols="140" rows="15"></textarea>
+        </div>
+        <div class="part-number-modal-action">
+          <basic-button @click="parsePartNumbers" icon="CloudArrowUp">Analyze input</basic-button>
+        </div>
+      </div>
+    </modal>
+
+    <div class="supplier-headers">
+      <h3 class="sub-header">Suppliers</h3>
+      <div class="supplier-headers-searchbar-container">
+        <autosuggest-searchbar @selected="selectedSupplier" placeholder="Search and add supplier ..." no-results-text='No supplier found for "{query}".' :fetch-suggestions="fetch"
+                               variant="flags" :reset-on-select="true"
+                               :flag-resolver="resolveFlag" title-resolver="name"
+                               subtitle-resolver="address"></autosuggest-searchbar>
+
+      </div>
+      <basic-button icon="plus" @click="activateModal('newSupplier')">Create a new supplier</basic-button>
+    </div>
+
+    <ul class="item-list">
+      <li class="item-list-element" v-for="supplier in assistantStore.suppliers" :key="supplier.id">
+        <supplier-item :id="supplier.id" :iso-code="supplier.iso" :address="supplier.address"
+                       :name="supplier.name" @delete="deleteSupplier" :is-user-supplier="supplier.isUserSupplier"></supplier-item>
+      </li>
+    </ul>
+
+    <modal :close-on-backdrop="false" :state="newSupplierModalState" @close="closeModal('newSupplier')">
+      <create-new-node @close="closeModal('newSupplier')"></create-new-node>
+    </modal>
+
+
+    <div class="start-calculation-footer-container">
+      <div class="start-calculation-footer-left">
+        This will create {{assistantStore.count}} calculations.
+      </div>
+      <div class="start-calculation-footer-right">
+        <checkbox :checked="!this.assistantStore.createEmpty" @checkbox-changed="setUseExisting">Import data from existing calculations</checkbox>
+        <basic-button :disabled="assistantStore.count==0" @click="createPremises" variant="secondary" :show-icon="false">Create</basic-button>
+      </div>
+    </div>
+  </div>
+
+
 </template>
 
+
 <script>
 
+import AutosuggestSearchbar from "@/components/UI/AutoSuggestSearchBar.vue";
+import {mapStores} from "pinia";
+import {useNodeStore} from "@/store/node.js";
+import BasicButton from "@/components/UI/BasicButton.vue";
+import MaterialItem from "@/components/layout/assistant/MaterialItem.vue";
+import SupplierItem from "@/components/layout/assistant/SupplierItem.vue";
+import Modal from "@/components/UI/Modal.vue";
+import {useAssistantStore} from "@/store/assistant.js";
+import CreateNewNode from "@/components/layout/node/CreateNewNode.vue";
+import Checkbox from "@/components/UI/Checkbox.vue";
+
+
 export default {
   name: "CalculationAssistant",
+  components: {Checkbox, CreateNewNode, Modal, SupplierItem, MaterialItem, BasicButton, AutosuggestSearchbar},
+  computed: {
+    ...mapStores(useNodeStore, useAssistantStore),
+    showPartNumberModal() {
+      return this.assistantStore.materials.length === 0 || this.partNumberModalState;
+    }
+  },
+  data() {
+    return {
+      newSupplierModalState: false,
+      partNumberModalState: false,
+      partNumberField: ''
+    }
+  },
+  methods: {
+    setUseExisting(useExisting) {
+      this.assistantStore.setCreateEmpty(!useExisting);
+    },
+    async createPremises() {
+      await this.assistantStore.createPremises();
+    },
+    selectedSupplier(supplier) {
+      this.assistantStore.addSupplier(supplier);
+    },
+    deleteMaterial(id) {
+      this.assistantStore.deleteMaterial(id);
+    },
+    deleteSupplier(id) {
+      this.assistantStore.deleteSupplier(id);
+    },
+    async fetch(query) {
+      const supplierQuery = {searchTerm: query, includeUserNode: true, nodeType: "SOURCE"};
+      await this.nodeStore.setQuery(supplierQuery);
+      return this.nodeStore.nodes;
+    },
+    resolveFlag(node) {
+      return node.country.iso_code;
+    },
+    activateModal(modalType) {
+      if (modalType === "partNumber")
+        this.partNumberModalState = true;
+      else if (modalType === "newSupplier")
+        this.newSupplierModalState = true;
+
+    },
+    closeModal(modalType) {
+      if (modalType === "partNumber")
+        this.partNumberModalState = false;
+      else if (modalType === "newSupplier")
+        this.newSupplierModalState = false;
+    },
+    parsePartNumbers() {
+      this.closeModal('partNumber');
+      this.assistantStore.getMaterialsAndSuppliers(this.partNumberField);
+      this.partNumberField = '';
+    }
+  },
+  created() {
+    this.nodeStore.loadNodes();
+  }
 }
 </script>
 
 
 <style scoped>
 
+.start-calculation-footer-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 1.6rem;
+}
+
+.start-calculation-footer-left {
+  font-weight: 400;
+  font-size: 1.4rem;
+  color: #6B869C;
+}
+
+.start-calculation-footer-right {
+  display: flex;
+  gap: 1.6rem;
+}
+
+
+
+.part-number-drop-container {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 0.4rem;
+  padding: 0.6rem 1.2rem;
+  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
+  border: 0.2rem solid #E3EDFF;
+  transition: all 0.1s ease;
+  flex: 1 0 auto;
+}
+
+.part-number-drop-container:hover {
+  background: #EEF4FF;
+  border: 0.2rem solid #8DB3FE;
+  /*transform: translateY(2px);*/
+  transform: scale(1.01);
+}
+
+textarea {
+  border: none;
+  outline: none;
+  background: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 1.4rem;
+  color: #002F54;
+}
+
+.part-number-modal-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+
+.part-number-modal-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.part-numbers-headers {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.6rem;
+}
+
+.item-list {
+  display: flex;
+  list-style: none;
+  gap: 2.4rem 2.4rem;
+  margin: 4.8rem;
+  flex-wrap: wrap;
+}
+
+.item-list-element {
+  display: flex;
+  justify-content: space-between;
+}
+
+.supplier-headers {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 2.4rem;
+}
+
+.supplier-headers-searchbar-container {
+  flex: 0 0 60rem;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/pages/CalculationSingleEdit.vue b/src/frontend/src/pages/CalculationSingleEdit.vue
index e3940bf..b0849f9 100644
--- a/src/frontend/src/pages/CalculationSingleEdit.vue
+++ b/src/frontend/src/pages/CalculationSingleEdit.vue
@@ -1,14 +1,103 @@
+<template>
+  <div class="edit-calculation-container">
+    <div class="header-container">
+      <h2 class="page-header">Edit Calculation</h2>
+      <div class="header-controls">
+        <basic-button :show-icon="false" variant="secondary">Close</basic-button>
+        <basic-button :show-icon="true" icon="Calculator" variant="primary">Close & calculate</basic-button>
+      </div>
+    </div>
+
+    <h3 class="sub-header">Master data</h3>
+    <div class="master-data-container">
+      <box class="master-data-item master-data-stretched-item">
+        <supplier-view supplier-address="1258 Gonghexin Road 闸北区, 上海市 200070 People's Republic of China" supplier-name="Linde (China) Forklift Truck (Supplier)"></supplier-view>
+      </box>
+      <box class="master-data-item master-data-stretched-item master-data-packaging">
+        <packaging-edit></packaging-edit>
+      </box>
+      <box class="master-data-item">
+        <material-edit></material-edit>
+      </box>
+      <box class="master-data-item">
+        <price-edit></price-edit>
+      </box>
+
+
+    </div>
+
+    <h3 class="sub-header">Destinations & routes</h3>
+    <div class="destination-list-container">
+      <box>
+        <destination-list-view></destination-list-view>
+      </box>
+    </div>
+
+
+    <div class="edit-calculation-material-edit"></div>
+    <div class="edit-calculation-packaging-edit"></div>
+    <div class="edit-calculation-price-edit"></div>
+    <div class="edit-calculation-destination-list"></div>
+  </div>
+</template>
+
 <script>
 
+import BasicButton from "@/components/UI/BasicButton.vue";
+import SupplierView from "@/components/layout/edit/SupplierView.vue";
+import Box from "@/components/UI/Box.vue";
+import MaterialEdit from "@/components/layout/edit/MaterialEdit.vue";
+import PackagingEdit from "@/components/layout/edit/PackagingEdit.vue";
+import PriceEdit from "@/components/layout/edit/PriceEdit.vue";
+import DestinationListView from "@/components/layout/edit/DestinationListView.vue";
+
 export default {
-  name: "SingleEdit"
+  name: "SingleEdit",
+  components: {DestinationListView, PriceEdit, PackagingEdit, MaterialEdit, Box, SupplierView, BasicButton}
 }
 </script>
 
-<template>
-  <h2>Edit Calculation</h2>
-</template>
-
 <style scoped>
 
+.edit-calculation-container {
+
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+.header-controls {
+  display: flex;
+  gap: 1.6rem;
+}
+
+.master-data-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 1.6rem;
+  margin: 2.4rem 1.6rem;
+}
+
+.master-data-stretched-item {
+  grid-row: span 2 / span 2;
+}
+
+.master-data-packaging {
+  grid-column-start: 3;
+  grid-row-start: 1;
+}
+
+.master-data-item {
+
+}
+
+.destination-list-container {
+  margin: 2.4rem 1.6rem;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/pages/Calculations.vue b/src/frontend/src/pages/Calculations.vue
index 2d746ca..2c086ba 100644
--- a/src/frontend/src/pages/Calculations.vue
+++ b/src/frontend/src/pages/Calculations.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
 
-    <h2 class="page-header">Calculation</h2>
+    <h2 class="page-header">My calculations</h2>
 
     <notification-bar v-if="premiseStore.error != null" variant="exception" icon="x"
                       @icon-clicked="premiseStore.error = null">
diff --git a/src/frontend/src/store/assistant.js b/src/frontend/src/store/assistant.js
new file mode 100644
index 0000000..d169594
--- /dev/null
+++ b/src/frontend/src/store/assistant.js
@@ -0,0 +1,178 @@
+import {defineStore} from 'pinia'
+import {config} from '@/config'
+
+
+export const useAssistantStore = defineStore('assistant', {
+    state: () => ({
+        materials: [],
+        suppliers: [],
+        createEmpty: false,
+        loading: false,
+        error: null,
+        pagination: {},
+        query: {},
+        premises: null
+    }),
+    getters: {
+        count: state => state.materials.length * state.suppliers.length,
+    },
+    actions: {
+        setCreateEmpty(createEmpty) {
+            this.createEmpty = createEmpty;
+        },
+        async createPremises() {
+
+            const url = `${config.backendUrl}/calculation/create/`;
+
+            const materialIds = this.materials.map((material) => material.id);
+            const supplierIds = this.suppliers.filter(s => s.id.startsWith('s')).map((supplier) => supplier.origId);
+            const userSupplierIds = this.suppliers.filter(s => s.id.startsWith('u')).map((supplier) => supplier.origId);
+            const jsonBody = JSON.stringify({ material: materialIds, supplier: supplierIds, user_supplier: userSupplierIds, createEmpty: this.createEmpty });
+
+            console.log(`Creation body: ${jsonBody}`);
+
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: jsonBody
+            }).catch(e => {
+                this.error = {code: 'Network error.', message: "Please check your internet connection.", trace: null}
+                console.error(this.error);
+                this.loading = false;
+                throw e;
+            });
+
+            const data = await response.json().catch(e => {
+                this.error = {
+                    code: 'Malformed response',
+                    message: "Malformed server response. Please contact support.",
+                    trace: null
+                }
+                console.error(this.error);
+                this.loading = false;
+                throw e;
+            });
+
+            if (!response.ok) {
+                this.error = {code: data.error.title, message: data.error.message, trace: data.error.details}
+                this.loading = false;
+                console.error(data);
+                return;
+            }
+
+            this.premises = data;
+            console.log(this.premises);
+
+
+        },
+        addSupplier(supplier) {
+            const uid = `${supplier.is_user_node ? 'u' : 's'}${supplier.id}`
+
+            if (!this.suppliers.some(s => s.id === uid)) {
+                this.suppliers.push({
+                    id: uid,
+                    origId: supplier.id,
+                    isUserSupplier: false,
+                    name: supplier.name,
+                    address: supplier.address,
+                    iso: supplier.country['iso_code']
+                })
+
+            }
+        },
+        deleteMaterial(id) {
+            const index = this.materials.findIndex(m => m.id === id);
+
+            if (index !== -1) {
+                this.materials.splice(index, 1);
+            }
+        },
+        deleteSupplier(id) {
+            const index = this.suppliers.findIndex(s => s.id === id);
+
+            if (index !== -1) {
+                this.suppliers.splice(index, 1);
+            }
+        },
+        async getMaterialsAndSuppliers(query) {
+
+            this.loading = true;
+            this.empty = true
+            this.materials = [];
+            this.suppliers = [];
+
+
+            const url = `${config.backendUrl}/calculation/search/`;
+
+            console.log(`${url} with query ${query}`);
+
+            const headers = new Headers();
+            headers.append('search', encodeURIComponent(query));
+
+
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: headers
+            }).catch(e => {
+                this.error = {code: 'Network error.', message: "Please check your internet connection.", trace: null}
+                this.loading = false;
+                throw e;
+            });
+
+            const data = await response.json().catch(e => {
+                this.error = {
+                    code: 'Malformed response',
+                    message: "Malformed server response. Please contact support.",
+                    trace: null
+                }
+                this.loading = false;
+                throw e;
+            });
+
+            if (!response.ok) {
+                this.error = {code: data.error.title, message: data.error.message, trace: data.error.details}
+                this.loading = false;
+                console.log(data);
+                return;
+            }
+
+
+            const newSuppliers = [];
+
+            for (const supplier of data.supplier) {
+                const newSupplier = {
+                    id: `s${supplier.id}`,
+                    origId: supplier.id,
+                    isUserSupplier: false,
+                    name: supplier.name,
+                    address: supplier.address,
+                    iso: supplier.country['iso_code']
+                };
+                newSuppliers.push(newSupplier);
+            }
+
+
+            for (const supplier of data.user_supplier) {
+                const newSupplier = {
+                    id: `u${supplier.id}`,
+                    origId: supplier.id,
+                    isUserSupplier: true,
+                    name: supplier.name,
+                    address: supplier.address,
+                    iso: supplier.country['iso_code']
+                };
+                newSuppliers.push(newSupplier);
+
+            }
+
+            this.loading = false;
+            this.materials = data.materials;
+            this.suppliers = newSuppliers;
+
+
+        }
+
+    }
+});
diff --git a/src/frontend/src/store/node.js b/src/frontend/src/store/node.js
new file mode 100644
index 0000000..4827fa0
--- /dev/null
+++ b/src/frontend/src/store/node.js
@@ -0,0 +1,68 @@
+import {defineStore} from 'pinia'
+import {config} from '@/config'
+
+
+export const useNodeStore = defineStore('node', {
+    state: () => ({
+        nodes: [],
+        loading: false,
+        empty: true,
+        error: null,
+        pagination: {},
+        query: {},
+    }),
+    getters: {
+        getById: (state) => {
+            return (id) => state.nodes.find(p => p.id === id)
+        }
+    },
+    actions: {
+        async setQuery(query) {
+            this.query = query;
+            await this.loadNodes();
+        },
+        async loadNodes() {
+
+            const params = new URLSearchParams();
+
+            if (this.query.searchTerm)
+                params.append('filter', this.query.searchTerm);
+
+            if (this.query.nodeType)
+                params.append('node_type', this.query.nodeType);
+
+            if (this.query.includeUserNode)
+                params.append('include_user_node', this.query.includeUserNode);
+
+            const url = `${config.backendUrl}/nodes/search/${params.size === 0 ? '' : '?'}${params.toString()}`;
+            console.log(url)
+            const response = await fetch(url).catch(e => {
+                this.error = {code: 'Network error.', message: "Please check your internet connection.", trace: null}
+                this.loading = false;
+                throw e;
+            });
+
+            const data = await response.json().catch(e => {
+                this.error = {
+                    code: 'Malformed response',
+                    message: "Malformed server response. Please contact support.",
+                    trace: null
+                }
+                this.loading = false;
+                throw e;
+            });
+
+            if (!response.ok) {
+                this.error = {code: data.error.title, message: data.error.message, trace: data.error.details}
+                this.loading = false;
+                console.log(data);
+                return;
+            }
+
+            this.loading = false;
+            this.empty = data.length === 0;
+            this.nodes = data;
+
+        }
+    }
+});