accept string and date in toLocalDate() util

resources/css/app.css

@@ -65,6 +65,8 @@ @theme inline {
     --color-status-reminded: var(--status-reminded);
 
     --text-xs: 0.694rem;
+
+    --shadow-arrow: 0 2px 1px rgb(0 0 0 / 0.1)
 }
 
 
@@ -111,7 +113,7 @@ :root {
     --secondary-foreground: hsl(0 0% 9%);
     --muted: var(--color-slate-50);
     --muted-foreground: var(--color-slate-400);
-    --accent: var(--color-stone-50);
+    --accent: var(--color-slate-50);
     --accent-foreground: hsl(0 0% 9%);
     --destructive: var(--color-red-500);
     --destructive-foreground: hsl(0 0% 98%);
@@ -143,9 +145,10 @@ :root {
 .dark {
     --background: var(--color-neutral-800);
     --foreground: var(--color-neutral-300);
-    --card: hsl(0 0% 3.9%);
+    --card: var(--color-neutral-800);
     --card-foreground: hsl(0 0% 98%);
-    --popover: hsl(0 0% 3.9%);
+    /* --popover: hsl(0 0% 3.9%); */
+    --popover: var(--color-neutral-900);
     --popover-foreground: hsl(0 0% 98%);
     --primary: var(--color-orange-300);
     --primary-foreground: var(--color-orange-600);

resources/js/components/CustomerDialog.vue

@@ -73,6 +73,31 @@ const cancelChanges = (event: Event | null) => {
     }
 }
 
+const handleLogoUpload = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+        const file = target.files[0];
+
+        // Hier könntest du die Datei validieren (Größe, Typ, etc.)
+        if (file.size > 2 * 1024 * 1024) { // 2MB
+            alert('Die Datei ist zu groß. Maximal 2MB erlaubt.');
+            return;
+        }
+
+        // Hier könntest du die Datei hochladen und den Pfad speichern
+        // customer.value.logo = ... // Pfad zur hochgeladenen Datei
+
+        // Für die Vorschau:
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            if (customer.value) {
+                customer.value.logo = e.target?.result as string;
+            }
+        };
+        reader.readAsDataURL(file);
+    }
+};
+
 </script>
 
 <template>
@@ -111,8 +136,168 @@ const cancelChanges = (event: Event | null) => {
                     </div>
                 </div>
 
-                <div class="flex-none md:flex gap-12 mt-6 2 p-6 bg-slate-100 dark:bg-neutral-900 rounded-lg">
+
-                    Customer Form hier
+
+                <div class="flex-none md:flex gap-12 mt-6 p-6 bg-slate-100 dark:bg-neutral-900 rounded-lg">
+                    <div class="space-y-4 w-full">
+
+                        <!-- Logo Upload -->
+                        <div>
+                            <div class="flex items-center gap-4">
+                                <div v-if="customer.logo" class="w-24 h-24 border rounded-md overflow-hidden">
+                                    <img :src="'/storage/uploads/' + customer.logo" alt="Aktuelles Logo"
+                                        class="w-full h-full object-contain">
+                                </div>
+
+                                <!-- Logo hochladen -->
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Neues
+                                        Logo hochladen</label>
+                                    <input type="file" @change="handleLogoUpload" accept="image/*"
+                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Max. 2MB, JPG, PNG oder GIF
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Firmenname -->
+                        <div>
+                            <label
+                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Firmenname</label>
+                            <input type="text" v-model="customer.companyName"
+                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                        </div>
+
+                        <!-- Kunden-Nummer -->
+                        <div>
+                            <label
+                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kunden-Nummer</label>
+                            <input type="text" v-model="customer.customerNr"
+                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                        </div>
+
+                        <!-- USt-IdNr -->
+                        <div>
+                            <label
+                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">USt-IdNr</label>
+                            <input type="text" v-model="customer.vatId"
+                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                        </div>
+
+                        <!-- Website -->
+                        <div>
+                            <label
+                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Website</label>
+                            <input type="url" v-model="customer.url"
+                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                        </div>
+
+                        <!-- Telefon -->
+                        <div>
+                            <label
+                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Telefon</label>
+                            <input type="tel" v-model="customer.phone"
+                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                        </div>
+
+                        <!-- Rechnungsadresse -->
+                        <div class="mt-6">
+                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-3">Rechnungsadresse</h3>
+
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Straße</label>
+                                    <input type="text" v-model="customer.billingAddress.lineOne"
+                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                </div>
+
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zusatzzeile</label>
+                                    <input type="text" v-model="customer.billingAddress.lineTwo"
+                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                </div>
+
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">PLZ</label>
+                                    <input type="text" v-model="customer.billingAddress.postalCode"
+                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                </div>
+
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Stadt</label>
+                                    <input type="text" v-model="customer.billingAddress.city"
+                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                </div>
+
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Land</label>
+                                    <input type="text" v-model="customer.billingAddress.country"
+                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Zahlungsbedingungen -->
+                        <div class="mt-6">
+                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-3">Zahlungsbedingungen
+                            </h3>
+
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bezeichnung</label>
+                                    <input type="text" v-model="customer.paymentTerms.name"
+                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                </div>
+
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beschreibung</label>
+                                    <input type="text" v-model="customer.paymentTerms.description"
+                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                </div>
+
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tage</label>
+                                    <input type="number" v-model="customer.paymentTerms.days"
+                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                </div>
+
+                                <div class="flex items-center mt-5">
+                                    <input type="checkbox" v-model="customer.paymentTerms.isFixed"
+                                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-neutral-800 dark:border-neutral-700">
+                                    <label class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Fix</label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Status -->
+                        <div class="mt-6">
+                            <label
+                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
+                            <select v-model="customer.status"
+                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
+                                <option value="active">Aktiv</option>
+                                <option value="inactive">Inaktiv</option>
+                                <option value="prospect">Interessent</option>
+                            </select>
+                        </div>
+
+                        <!-- Notizen -->
+                        <div class="mt-6">
+                            <label
+                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notizen</label>
+                            <textarea v-model="customer.notes" rows="4"
+                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700"></textarea>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="px-4 mt-6">

resources/js/components/documents/DocumentTable.vue

@@ -119,8 +119,9 @@ const calcTaxes = (amount: number) => {
                 <TableHead class="sticky top-0 w-1/20 text-right hidden lg:table-cell">Brutto</TableHead>
             </TableRow>
         </TableHeader>
+        
         <TableBody class="overflow-clip rounded-lg">
-            <TableRow v-for="invoice in invoices" :key="invoice.nr" @click="onItemClicked(invoice)"
+            <TableRow v-for="invoice in invoices" :key="invoice.nr" @dblclick="onItemClicked(invoice)"
                 class="select-none md:select-auto cursor-default bg-background"
                 :style="'color:' + statusBadgeTextColor(invoice.paymentStatus)">
                 <TableCell class="w-1/100 hidden md:table-cell lg:pr-5 tabular-nums">{{ invoice.nr }}

resources/js/components/documents/InvoiceDialog.vue

@@ -205,7 +205,7 @@ const cancelChanges = (event: Event | null) => {
                     isOpen.value = false
                 },
                 onCancel: () => {
-                    if(!event) return
+                    if (!event) return
                     event.preventDefault()
                     event.returnValue = true
                 }
@@ -293,7 +293,10 @@ const updateTotalAmount = () => {
             @escapeKeyDown="cancelChanges" @interactOutside="cancelChanges">
 
             <DialogHeader class="px-3 pt-3 flex flex-row justify-end">
-                <DialogTitle class="sr-only">Rechnung</DialogTitle>
+                <DialogTitle class="sr-only">Rechnung {{ invoice?.nr }}</DialogTitle>
+                <DialogDescription>
+                    {{ invoice?.title }}
+                </DialogDescription>
 
                 <div v-if="invoice && invoice.id > 0" class="hidden md:flex mr-4">
                     <Button :size="'sm'" :variant="'ghost'" @click="preview">

resources/js/components/ui/button/index.ts

@@ -18,7 +18,7 @@ export const buttonVariants = cva(
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost:
-          'border-none shadow-none hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          'border-none shadow-none hover:bg-slate-100 hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',
         pressed:
           'bg-slate-100 dark:bg-neutral-700 shadow-none inset-shadow-2xs inset-shadow-black/15 border-none',

resources/js/lib/utils.ts

@@ -31,7 +31,7 @@ export function toFixedRounded(num: number, precision: number): number {
     return Number((Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)).toFixed(precision))
 }
 
-export function toLocalDate(value: string) {
+export function toLocalDate(value: string | Date) {
     const date = new Date(value);
     return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', year: 'numeric' });
     // return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric'  });
@@ -71,6 +71,10 @@ export function bgColorForString(input: string): string {
     return randomColors[charCodeSum % randomColors.length];
 }
 
+export function clearSelection() {
+    window.getSelection()?.removeAllRanges();
+};
+
 const promise = () => new Promise((resolve) => setTimeout(resolve, 2000))
 export function testToast() {
     let delay = 150

resources/js/pages/Customers.vue

@@ -18,6 +18,7 @@ import Fuse from 'fuse.js';
 import { getInitials } from '@/composables/useInitials';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { TooltipArrow } from 'reka-ui'
 import CustomerDialog from '@/components/CustomerDialog.vue'
 import { toast } from 'vue-sonner'
 import { SocialIcon } from '@/components/ui/social-icon'
@@ -39,7 +40,7 @@ const detailDialogOpen = ref(false)
 onMounted(async () => {
     try {
         const response = await api.get('/customers');
-        customersData.value = (response.data as Customer[]).toSorted((a, b) => a.companyName.localeCompare(b.companyName));;
+        customersData.value = (response.data as Customer[]).toSorted((a, b) => (a.companyName ?? '').localeCompare(b.companyName ?? ''));
         searchField.value = document.getElementById('search')
         searchField.value.focus()
 
@@ -169,8 +170,8 @@ const call = (number: string, event: Event) => {
             <div class="columns-xs gap-6">
 
                 <Card v-for="customer in filteredCustomers" :key="customer.id"
-                    class="relative mb-6 break-inside-avoid hover:bg-accent active:shadow-none overflow-clip"
+                    class="relative mb-6 break-inside-avoid hover:border-slate-300 dark:hover:border-neutral-600 overflow-clip"
-                    @click="showDetail(customer)">
+                    @click="" @dblclick="showDetail(customer)">
 
                     <CardHeader v-if="customer.logo" class="z-0">
                         <img :src="'storage/uploads/' + customer.logo" alt="Logo {{ customer.companyName }}"
@@ -234,7 +235,7 @@ const call = (number: string, event: Event) => {
 
                             <Tooltip v-for="contact in customer.contacts">
                                 <TooltipTrigger>
-                                    <Avatar class="-mr-2 size-14 shadow">
+                                    <Avatar class="size-14 shadow -mr-2">
                                         <AvatarImage v-if="contact.avatar" :src="'/storage/uploads/' + contact.avatar"
                                             loading="lazy" />
                                         <AvatarFallback
@@ -243,7 +244,7 @@ const call = (number: string, event: Event) => {
                                         </AvatarFallback>
                                     </Avatar>
                                 </TooltipTrigger>
-                                <TooltipContent class="p-4">
+                                <TooltipContent class="p-4 -mr-2" :side-offset="-1">
                                     <p class="font-bold">
                                         <span v-if="contact.academicTitle">{{ contact.academicTitle }}</span>
                                         <span>{{ contact.firstName + ' ' + contact.lastName }}</span>
@@ -272,6 +273,8 @@ const call = (number: string, event: Event) => {
                                             <SocialIcon :variant="account.platform" />
                                         </Button>
                                     </ButtonGroup>
+                                    <TooltipArrow :height="8" :width="16"
+                                        class="fill-popover drop-shadow-(--shadow-arrow) stroke-[0.5px] stroke-border -mt-[1px]" />
                                 </TooltipContent>
                             </Tooltip>
 
@@ -305,4 +308,10 @@ const call = (number: string, event: Event) => {
 [data-slot=dialog-overlay] {
     backdrop-filter: blur(var(--blur-sm));
 }
+
+/* hover:not(:has(*:hover)) */
+[data-slot="card"]:hover:has(a:hover),
+[data-slot="card"]:hover:has(button:hover) {
+    background-color: var(--card);
+}
 </style>