Caramel-CRM/resources/js/pages/Dashboard.vue

<script setup lang="ts">
import { onMounted, ref } from "vue"

import AppLayout from '@/layouts/AppLayout.vue';
import { Trophy, ArrowRight, UserCheck2 } from 'lucide-vue-next';
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
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
if (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="columns-1 lg:columns-2 xl:columns-3 gap-8">

            <!-- Rechnungen -->
            <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 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>
                    <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-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
                                <ArrowRight class="inline h-4 w-4" />
                            </a>
                        </AlertDescription>
                    </Alert>

                </CardContent>
            </Card>

        </div>


    </AppLayout>
</template>