Changed STore Type and corrected all Pages

Added HistoryDisplay.vue
Added NumberRanges

spaces/pages/products/[mode]/[[id]].vue

@@ -3,18 +3,13 @@ definePageMeta({
   middleware: "auth"
 })
 
-//
+const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
 
-
-//Store
-const {products, units, ownTenant } = storeToRefs(useDataStore())
-const {fetchProducts, getProductById, getStockByProductId} = useDataStore()
-
 let currentProduct = null
 
 
@@ -29,7 +24,7 @@ const itemInfo = ref({
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentProduct = getProductById(Number(useRoute().params.id))
+    currentProduct = dataStore.getProductById(Number(useRoute().params.id))
   }
 
   if(mode.value === "edit") itemInfo.value = currentProduct
@@ -53,7 +48,7 @@ const createItem = async () => {
       name: ""
     }
     toast.add({title: "Artikel erfolgreich erstellt"})
-    await fetchProducts()
+    await dataStore.fetchProducts()
     router.push(`/products/show/${data[0].id}`)
     setupPage()
   }
@@ -87,7 +82,7 @@ const updateItem = async () => {
       name: "",
     }
     toast.add({title: "Artikel erfolgreich gespeichert"})
-    fetchProducts()
+    dataStore.fetchProducts()
   }
 
 
@@ -116,20 +111,22 @@ setupPage()
         class="my-2"
       />
 
-      Bestand: {{getStockByProductId(currentProduct.id)}} {{units.find(unit => unit.id === currentProduct.unit) ? units.find(unit => unit.id === currentProduct.unit).name : ""}}
+      Bestand: {{dataStore.getStockByProductId(currentProduct.id)}} {{dataStore.units.find(unit => unit.id === currentProduct.unit) ? dataStore.units.find(unit => unit.id === currentProduct.unit).name : ""}}
 
+      <DevOnly>
+        <UDivider
+            class="my-2"
+        />
 
-      <UDivider
-          class="my-2"
-      />
+        {{currentProduct}}
+      </DevOnly>
 
-      {{currentProduct}}
 
 
 
       <template #footer>
         <UButton
-            v-if="mode == 'show' && currentProduct.id"
+            v-if="mode === 'show' && currentProduct.id"
             @click="editItem"
         >
           Bearbeiten
@@ -148,7 +145,7 @@ setupPage()
 
     </UCard>
     <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header>
+      <template #header v-if="mode === 'edit'">
         {{itemInfo.name}}
       </template>
 
@@ -171,12 +168,12 @@ setupPage()
       >
         <USelectMenu
           v-model="itemInfo.unit"
-          :options="units"
+          :options="dataStore.units"
           option-attribute="name"
           value-attribute="id"
         >
           <template #label>
-            {{units.find(unit => unit.id === itemInfo.unit) ? units.find(unit => unit.id === itemInfo.unit).name : itemInfo.unit }}
+            {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : itemInfo.unit }}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -185,7 +182,7 @@ setupPage()
       >
         <USelectMenu
           v-model="itemInfo.tags"
-          :options="ownTenant.tags.products"
+          :options="dataStore.ownTenant.tags.products"
           multiple
         />
       </UFormGroup>