Two month of work

resources/js/pages/Invoices.vue

@@ -5,6 +5,7 @@ import { type Invoice } from '@/types'
 import { newInvoice } from '@/types/index.d'
 import axios from 'axios'
 import AppLayout from '@/layouts/AppLayout.vue'
+import AppHeader from '@/components/AppHeader.vue'
 import { Button } from '@/components/ui/crm-button'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from '@/components/ui/select'
 import DocumentTable from '@/components/documents/DocumentTable.vue'
@@ -15,11 +16,10 @@ import SelectSeparator from '@/components/ui/select/SelectSeparator.vue'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { statusBadgeLabels } from '@/components/ui/status-badge'
-import AppHeader from '@/components/AppHeader.vue'
 import InvoiceDialog from '@/components/documents/InvoiceDialog.vue'
 import { hotkey, getPlatformModifierSymbol } from '@/lib/utils'
 
-// initial invoice data from inertia
+// Initial invoice data from inertia (see InvoiceController::show)
 interface Props {
     invoicesData: Invoice[];
 }
@@ -49,7 +49,7 @@ onMounted(async () => {
 
     searchField.value = document.getElementById('search')
 
-    // register hotkeys
+    // Register hotkeys
     hotkey('n', createInvoice)
     hotkey('mod+leftarrow', () => {
         if (selectedYearIndex.value < (years.value.length - 1)) {
@@ -87,6 +87,7 @@ const fuse = computed(() => {
             'title',
             'nr'
         ],
+        useExtendedSearch: true,
         threshold: 0.3,
     }
 
@@ -211,11 +212,11 @@ const onDeleteInvoice = async (id: number) => {
                 <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
                     v-model="searchQuery" />
                 <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
-                    <Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                    <Search class="size-4 text-muted-foreground" />
                 </span>
                 <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
                     <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
-                        <Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                        <Delete class="size-4 text-muted-foreground" />
                     </Button>
                 </span>
             </template>
@@ -225,7 +226,7 @@ const onDeleteInvoice = async (id: number) => {
                 <TooltipProvider>
                     <Tooltip>
                         <TooltipTrigger>
-                            <Button size="sm" variant="action" @click="createInvoice">
+                            <Button @click="createInvoice">
                                 <Plus />
                                 Neu
                             </Button>