Changed STore Type and corrected all Pages

Added HistoryDisplay.vue
Added NumberRanges

spaces/pages/banking/index.vue

@@ -31,18 +31,11 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
-const {bankAccounts} = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const itemColumns = [
-
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },
   {
     key: "iban",
     label: "IBAN",
@@ -69,13 +62,13 @@ const selectItem = (item) => {
 const searchString = ref('')
 
 const filteredRows = computed(() => {
-  bankAccounts.value = bankAccounts.value.filter(account => account.used)
+  dataStore.bankAccounts = dataStore.bankAccounts.filter(account => account.used)
 
   if(!searchString.value) {
-    return bankAccounts.value
+    return dataStore.bankAccounts
   }
 
-  return bankAccounts.value.filter(item => {
+  return dataStore.bankAccounts.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })

spaces/pages/banking/statements/[[accountId]].vue

@@ -4,21 +4,20 @@ import * as dayjs from "dayjs";
 definePageMeta({
   middleware: "auth"
 })
-
+const dataStore = useDataStore()
 const route = useRoute()
 const supabase = useSupabaseClient()
 
-const {bankStatements,bankAccounts} = storeToRefs(useDataStore())
 
 const searchString = ref("")
 const showAssigned = ref(false)
 const selectedAccount = ref(0)
 
 const filteredRows = computed(() => {
-  let statements = bankStatements.value
+  let statements = dataStore.bankStatements
 
   if(!showAssigned.value) {
-    statements = statements.filter(statement => !(statement.customerInvoice || statement.vendorInvoice))
+    statements = statements.filter(statement => !statement.customerInvoice || !statement.vendorInvoice)
   }
 
   if(selectedAccount.value !== 0) {
@@ -26,17 +25,14 @@ const filteredRows = computed(() => {
   }
 
   if(searchString.value.length > 0) {
-    return statements.value.filter(item => {
+    statements = statements.filter(item => {
       return Object.values(item).some((value) => {
         return String(value).toLowerCase().includes(searchString.value.toLowerCase())
       })
     })
-  } else {
-    return statements
   }
 
-
-
+  return statements
 })
 
 
@@ -91,19 +87,19 @@ const statementColumns = [
 
   </USlideover>
 
-  <InputGroup gap="2">
+  <InputGroup :gap="2">
     <UInput
         v-model="searchString"
         placeholder="Suche..."
     />
     <USelectMenu
-      :options="bankAccounts.filter(account => account.used)"
+      :options="dataStore.bankAccounts.filter(account => account.used)"
       v-model="selectedAccount"
       option-attribute="iban"
       value-attribute="id"
     >
       <template #label>
-        {{bankAccounts.find(account => account.id === selectedAccount) ? bankAccounts.find(account => account.id === selectedAccount).iban : "Kontoauswählen"}}
+        {{dataStore.bankAccounts.find(account => account.id === selectedAccount) ? dataStore.bankAccounts.find(account => account.id === selectedAccount).iban : "Kontoauswählen"}}
       </template>
     </USelectMenu>
     <UCheckbox
@@ -113,7 +109,7 @@ const statementColumns = [
   </InputGroup>
 
   <UTable
-      :rows="bankStatements"
+      :rows="filteredRows"
       :columns="statementColumns"
       @select="selectStatement"
     >