Sales Dashboard Widget

resources/css/app.css

@@ -173,7 +173,7 @@ .dark {
     --popover: var(--color-neutral-900);
     --popover-foreground: hsl(0 0% 98%);
     --primary: var(--color-orange-300);
-    --primary-foreground: var(--color-orange-600);
+    --primary-foreground: var(--color-orange-400);
     --secondary: hsl(0 0% 14.9%);
     --secondary-foreground: hsl(0 0% 98%);
     --muted: var(--color-neutral-700);

resources/js/components/ui/progress/Progress.vue

@@ -29,7 +29,7 @@ const delegatedProps = reactiveOmit(props, "class")
     "
   >
     <ProgressIndicator
-      class="h-full w-full flex-1 bg-primary transition-all"
+      class="h-full w-full flex-1 bg-primary-foreground transition-all"
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>

resources/js/lib/utils.ts

@@ -27,6 +27,18 @@ export function toCurrency(value: number | undefined) {
     return currencyFormatter.format(value);
 }
 
+const roundedCurrencyFormatter = new Intl.NumberFormat('de-DE', {
+    style: 'currency',
+    currency: 'EUR',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+})
+
+export function toRoundedCurrency(value: number | undefined) {
+    if (!value) return roundedCurrencyFormatter.format(0);
+    return roundedCurrencyFormatter.format(toFixedRounded(value, 0));
+}
+
 export function toFixedRounded(num: number, precision: number): number {
     return Number((Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)).toFixed(precision))
 }

resources/js/pages/Dashboard.vue

@@ -1,40 +1,250 @@
 <script setup lang="ts">
+import { onMounted, ref } from "vue"
+
 import AppLayout from '@/layouts/AppLayout.vue';
-import { usePage } from '@inertiajs/vue3';
 import { Trophy, ArrowRight, UserCheck2 } from 'lucide-vue-next';
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-import { Table, TableCell, TableHead, TableRow, } from '@/components/ui/table';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'
+import Button from '@/components/ui/crm-button/Button.vue';
+import { invoices } from '@/routes';
+import { toCurrency, toLocalDate, toRoundedCurrency } from '@/lib/utils'
+import { Check, Mail, PhoneCall } from "lucide-vue-next"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'
+import { Link, usePage } from '@inertiajs/vue3';
+import axios, { AxiosError } from "axios";
+import { toast } from "vue-sonner";
 
+// defineProps<{
+//     yearlyStatistics: {
+//         year: number,
+//         totalRevenue: number,
+//         paid: number,
+//         draft: number,
+//         issued: number,
+//         due: number,
+//         reminded: number,
+//     },
+// }>()
+
+const salesStatistics = ref({
+    year: new Date().getFullYear(),
+    totalRevenue: 0,
+    paid: 0,
+    draft: 0,
+    issued: 0,
+    due: 0,
+    reminded: 0,
+})
+
+// TODO: aus settings
+const salesTarget = ref(60000)
 const page = usePage();
-const token = page.props.flash?.token;
+const token = page.props.flash?.token
-
 if (token) {
-    localStorage.setItem('sanctum_token', token);
+    localStorage.setItem('sanctum_token', token)
 }
 
+onMounted(async () => {
+    // Load sales statistics
+    try {
+        let response = await axios.get('/api/invoices/salesStatistics')
+        salesStatistics.value = response.data
+    } catch (error) {
+        toast.error('Fehler beim Laden der Daten', { description: (error as AxiosError).message })
+    }
+})
+
+
+const todos = ref([
+    { text: 'Lorem ipsum', dueDate: '2025-11-25', done: false, type: 'phoneCall' },
+    { text: 'Lorem ipsum', dueDate: '2025-11-25', done: false, type: 'mail' },
+    { text: 'Lorem ipsum', dueDate: '2025-11-25', done: false, type: 'task' }
+])
+
 </script>
 
 <template>
 
     <AppLayout title="Dashboard">
-        <div class="grid gap-12 md:grid-cols-2 h-full md:p-8">
+        <div class="columns-1 lg:columns-2 xl:columns-3 gap-8">
 
-            <div class="relative overflow-y-auto">
+            <!-- Rechnungen -->
-                Geplante Aktivitäten
+            <Card class="break-inside-avoid mb-12">
+                <CardHeader>
+                    <CardTitle>Fällige Rechnungen</CardTitle>
+                    <CardDescription>Card Description</CardDescription>
+                </CardHeader>
+                <CardContent>
+
+                </CardContent>
+                <CardFooter>
+                    <Link :href="invoices()" prefetch><Button>Zu den Rechnungen</Button></Link>
+                </CardFooter>
+            </Card>
+
+
+            <!-- Aufgaben -->
+            <Card class="break-inside-avoid mb-8">
+                <CardHeader>
+                    <CardTitle>Aufgaben</CardTitle>
+                    <CardDescription>Card Description</CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <h3 class="mb-4 font-bold text-md">Verspätet</h3>
+                    <ul class="flex flex-col">
+                        <li v-for="todo in todos"
+                            class="grid grid-cols-[calc(var(--spacing)_*_6)_auto] gap-y-0 gap-x-2 items-start border-b-1 last:border-0 border-foreground/20 py-2.5 pl-1 pr-2">
+                            <div
+                                class="mt-1 row-span-2 w-5 aspect-square rounded-full border-muted-foreground border-1 flex items-center justify-center">
+                                <div
+                                    class="w-3.5 relative aspect-square rounded-full bg-transparent has-[input:checked]:bg-muted-foreground">
+                                    <input type="checkbox" class="absolute -inset-2 opacity-0">
+                                </div>
                             </div>
-            <div class="flex flex-col gap-8">
-                <div class="relative overflow-y-auto">
 
-                    <div class="flex flex-wrap gap-2 overflow-x-auto">
+                            <div class="flex items-center gap-2">
+                                <span class="my-0 px-0 text-base! h-6 border-0 outline-0 shadow-none">{{ todo.text
+                                }}</span>
+                                <PhoneCall v-if="todo.type === 'phoneCall'" stroke-width="1.5" :size="16"
+                                    class="text-muted-foreground" />
+                                <Check v-else-if="todo.type === 'task'" stroke-width="1.5" :size="16"
+                                    class="text-muted-foreground" />
+                                <Mail v-else-if="todo.type === 'mail'" stroke-width="1.5" :size="16"
+                                    class="text-muted-foreground" />
+                            </div>
 
-                        <Alert class="bg-amber-300">
+                            <div class="text-sm text-muted-foreground">{{ toLocalDate(todo.dueDate) }}</div>
-                            <Trophy class="h-4 w-4" />
+                        </li>
+                    </ul>
+                    <h3 class="mb-4 font-bold text-md">Heute</h3>
+                    <ul class="flex flex-col">
+                        <li v-for="todo in todos"
+                            class="grid grid-cols-[calc(var(--spacing)_*_6)_auto] gap-y-0 gap-x-2 items-start border-b-1 last:border-0 border-foreground/20 py-2.5 pl-1 pr-2">
+                            <div
+                                class="mt-1 row-span-2 w-5 aspect-square rounded-full border-muted-foreground border-1 flex items-center justify-center">
+                                <div
+                                    class="w-3.5 relative aspect-square rounded-full bg-transparent has-[input:checked]:bg-muted-foreground">
+                                    <input type="checkbox" class="absolute -inset-2 opacity-0">
+                                </div>
+                            </div>
+
+                            <div class="flex items-center gap-2">
+                                <span class="my-0 px-0 text-base! h-6 border-0 outline-0 shadow-none">{{ todo.text
+                                }}</span>
+                                <PhoneCall v-if="todo.type === 'phoneCall'" stroke-width="1.5" :size="16"
+                                    class="text-muted-foreground" />
+                                <Check v-else-if="todo.type === 'task'" stroke-width="1.5" :size="16"
+                                    class="text-muted-foreground" />
+                                <Mail v-else-if="todo.type === 'mail'" stroke-width="1.5" :size="16"
+                                    class="text-muted-foreground" />
+                            </div>
+
+                            <div class="text-sm text-muted-foreground">{{ toLocalDate(todo.dueDate) }}</div>
+                        </li>
+                    </ul>
+                </CardContent>
+            </Card>
+
+
+            <!-- Umsatz -->
+            <Card class="break-inside-avoid mb-8 relative overflow-clip">
+                <div class="bg-image absolute -inset-6 opacity-30 blur-[2px]"
+                    style="background-image: url('/storage/images/patterns/19742.jpg'); background-size: 150%;" </div>
+                    <CardHeader>
+                        <CardTitle>Umsatz {{ salesStatistics?.year || '' }}</CardTitle>
+                        <CardDescription>Card Description</CardDescription>
+                    </CardHeader>
+                    <CardContent class="relative flex flex-col gap-3">
+
+                        <div class="flex items-baseline justify-between">
+                            <span class="text-xl font-bold text-primary-foreground">{{
+                                toRoundedCurrency(salesStatistics?.paid) || '' }}</span>
+                            <span>{{ toRoundedCurrency(salesTarget) }}</span>
+                        </div>
+
+                        <!-- <Progress :model-value="66" class="w-full h-10 rounded-lg text-primary-foreground"
+                        data-state="indeterminate" /> -->
+
+                        <div class="w-full h-8 bg-secondary dark:bg-neutral-900 rounded-md overflow-clip relative flex">
+                            <TooltipProvider :delay-duration="0" v-if="salesStatistics">
+                                <!-- Paid -->
+                                <Tooltip>
+                                    <TooltipTrigger as-child>
+                                        <div :style="'width: ' + (salesStatistics.paid / salesTarget * 100) + '%'"
+                                            class="bg-primary-foreground transition-width duration-500 ease-out"></div>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <strong>Bezahlt</strong>
+                                        <p>{{ toRoundedCurrency(salesStatistics.paid) }}</p>
+                                    </TooltipContent>
+                                </Tooltip>
+
+                                <!-- Issued -->
+                                <Tooltip>
+                                    <TooltipTrigger as-child>
+                                        <div :style="'width: ' + (salesStatistics.issued / salesTarget * 100) + '%'"
+                                            class="bg-gray-500 transition-width duration-500 ease-out">
+                                        </div>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <strong>Gestellt</strong>
+                                        <p>{{ toRoundedCurrency(salesStatistics.issued) }}</p>
+                                    </TooltipContent>
+                                </Tooltip>
+
+                                <!-- Due -->
+                                <Tooltip>
+                                    <TooltipTrigger as-child>
+                                        <div :style="'width: ' + (salesStatistics.due / salesTarget * 100) + '%'"
+                                            class="bg-gray-400 transition-width duration-500 ease-out">
+                                        </div>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <strong>Fällig</strong>
+                                        <p>{{ toRoundedCurrency(salesStatistics.due) }}</p>
+                                    </TooltipContent>
+                                </Tooltip>
+
+                                <!-- Reminded -->
+                                <Tooltip>
+                                    <TooltipTrigger as-child>
+                                        <div :style="'width: ' + (salesStatistics.reminded / salesTarget * 100) + '%'"
+                                            class="bg-gray-300 transition-width duration-500 ease-out">
+                                        </div>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <strong>Gemahnt</strong>
+                                        <p>{{ toRoundedCurrency(salesStatistics.reminded) }}</p>
+                                    </TooltipContent>
+                                </Tooltip>
+
+                                <div :style="'width: ' + (salesStatistics.draft / salesTarget * 100) + '%'"
+                                    class="bg-muted-500 transition-width duration-500 ease-out">
+                                </div>
+                            </TooltipProvider>
+                        </div>
+
+                    </CardContent>
+            </Card>
+
+            <!-- Nachrichten -->
+            <Card class="break-inside-avoid mb-8">
+                <CardHeader>
+                    <CardTitle>Neuer Erfolg</CardTitle>
+                    <CardDescription>Card Description</CardDescription>
+                </CardHeader>
+                <CardContent class="flex flex-col gap-3">
+
+                    <Alert class="bg-muted">
+                        <Trophy class="h-4 w-4 stroke-amber-600" />
                         <AlertTitle>Du hast zwei neue Erfolge</AlertTitle>
                         <AlertDescription class="text-sky-600">
+                            Weiter so
                         </AlertDescription>
                     </Alert>
-                        <Alert class="bg-sky-300">
+
-                            <UserCheck2 class="h-4 w-4" />
+                    <Alert class="bg-muted">
+                        <UserCheck2 class="h-4 w-4 stroke-lime-600"/>
                         <AlertTitle>Du hast länger keine Bestandskunden mehr kontaktiert</AlertTitle>
                         <AlertDescription class="text-sky-600">
                             <a href="">Hier sind ein paar Vorschläge für Dich
@@ -43,34 +253,11 @@ if (token) {
                         </AlertDescription>
                     </Alert>
 
+                </CardContent>
+            </Card>
+
         </div>
-                </div>
+
-                <div class="relative flex-1 overflow-y-auto">
+
-                    <h1 class="mb-4">Offene Rechnungen</h1>
-                    <Table>
-                        <TableRow>
-                            <TableHead class="text-right px-4">Bezahlt</TableHead>
-                            <TableCell class="text-right px-4 tabular-nums">21.976,09 €</TableCell>
-                        </TableRow>
-                        <TableRow>
-                            <TableHead class="text-right px-4">Gestellt, nicht bezahlt</TableHead>
-                            <TableCell class="text-right px-4 text-destructive font-bold tabular-nums">8.637,00 €
-                            </TableCell>
-                        </TableRow>
-                        <TableRow class="border-b-slate-600">
-                            <TableHead class="text-right px-4">Noch nicht gestellt</TableHead>
-                            <TableCell class="text-right px-4 tabular-nums">–</TableCell>
-                        </TableRow>
-                        <TableRow class="border-b-0">
-                            <TableHead class="text-right px-4 font-bold">Summe</TableHead>
-                            <TableCell class="text-right px-4 font-bold tabular-nums">30.613,09 €</TableCell>
-                        </TableRow>
-                    </table>
-                </div>
-                <div class="relative flex-1 overflow-y-auto">
-                    Aktuelle Angebote
-                </div>
-            </div>
-        </div>
     </AppLayout>
 </template>

routes/api.php

@@ -26,6 +26,7 @@
 Route::get('/invoices/summary', [InvoiceController::class, 'summaryAll']);
 Route::get('/invoices/summaryThisYear', [InvoiceController::class, 'summaryThisYear']);
 Route::get('/invoices/summaryBeforeThisYear', [InvoiceController::class, 'summaryBeforeThisYear']);
+Route::get('/invoices/salesStatistics', [InvoiceController::class, 'salesStatistics']);
 Route::get('/invoices', [InvoiceController::class, 'index']);
 Route::post('/invoices', [InvoiceController::class, 'store']);
 Route::get('/invoices/{id}', [InvoiceController::class, 'single']);