Sales Dashboard Widget
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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))
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
Geplante Aktivitäten
|
||||
<!-- 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 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">
|
||||
<Trophy class="h-4 w-4" />
|
||||
<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-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>
|
||||
|
||||
@@ -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']);
|
||||
|
||||
Reference in New Issue
Block a user