Changed STore Type and corrected all Pages

Added HistoryDisplay.vue
Added NumberRanges

spaces/app.vue

@@ -9,11 +9,23 @@ const route = useRoute()
 const colorMode = useColorMode()
 const supabase = useSupabaseClient()
 const tenants = (await supabase.from("tenants").select()).data
-const {loaded, profiles} = storeToRefs(useDataStore())
-const {fetchData, getProfileById, clearStore} = useDataStore()
-const userProfile = (user.value ? getProfileById(user.value.id) : {})
+
+const dataStore = useDataStore()
+
+
+const userProfile = (user.value ? dataStore.getProfileById(user.value.id) : {})
 //console.log(userProfile)
 
+
+const isLight = computed({
+  get () {
+    return colorMode.value !== 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
 const viewport = useViewport()
 
 watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
@@ -21,7 +33,7 @@ watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
 })
 
 
-fetchData()
+dataStore.fetchData()
 
 const navLinks = [
   {
@@ -57,8 +69,13 @@ const navLinks = [
       {
         label: "Eingangsrechnungen",
         to: "/vendorinvoices",
-        icon: "i-heroicons-user-group"
+        icon: "i-heroicons-document-text"
       },
+      /*{
+        label: "Ausgangsrechnungen",
+        to: "/customerinvoices",
+        icon: "i-heroicons-document-text"
+      },*/
       {
         label: "Bank",
         to: "/banking",
@@ -215,6 +232,10 @@ const items = [
     label: 'Externe Geräte',
     icon: 'i-heroicons-cog-8-tooth',
     to: "/settings/externalDevices"
+  },{
+    label: 'Nummernkreise',
+    icon: 'i-heroicons-cog-8-tooth',
+    to: "/settings/numberRanges"
   },{
     label: 'Benutzer',
     icon: 'i-heroicons-user-group',
@@ -233,7 +254,7 @@ const items = [
     icon: 'i-heroicons-arrow-left-on-rectangle',
     click: async () => {
       await supabase.auth.signOut()
-      await clearStore()
+      await dataStore.clearStore()
       await router.push("/login")
 
     }
@@ -247,14 +268,8 @@ const items = [
     <template #logo>
       <div id="logo">
         <img
-            v-if="colorMode.value === 'light'"
-            alt="Logo Hell"
-            src="/spaces_hell.svg"
-        />
-        <img
-            v-else
-            src="/spaces.svg"
-            alt="Logo Dunkel"
+            :src="!isLight  ? '/spaces.svg' : '/spaces_hell.svg'"
+            alt="Logo"
         />
       </div>
 
@@ -265,7 +280,19 @@ const items = [
     </template>
 
     <template #right  v-if="user">
-      <UColorModeButton/>
+      <ClientOnly>
+        <UButton
+            :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+            color="gray"
+            variant="ghost"
+            aria-label="Theme"
+            @click="isLight = !isLight"
+        />
+
+        <template #fallback>
+          <div class="w-8 h-8" />
+        </template>
+      </ClientOnly>
       <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
         <UAvatar
             :alt="userProfile ? userProfile.firstName + ' ' + userProfile.lastName : '' "
@@ -275,7 +302,7 @@ const items = [
         <template #account="{ item }">
           <div class="text-left">
             <p>
-              Signed in as
+              Eingeloggt als
             </p>
             <p class="truncate font-medium text-gray-900 dark:text-white">
               {{ item.label }}
@@ -415,4 +442,8 @@ const items = [
     border: 1px solid #69c350;
   }
 
+
+  a:hover {
+    color: #69c350
+  }
 </style>