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

88 lines
3.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { dashboard } from '@/routes';
import { Head } from '@inertiajs/vue3';
import PlaceholderPattern from '../components/PlaceholderPattern.vue';
import { usePage } from '@inertiajs/vue3';
import { Trophy, ShieldCheck, Star, ArrowRight, UserCheck, UserCheck2 } from 'lucide-vue-next';
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
const page = usePage();
const token = page.props.flash?.token;
if (token) {
localStorage.setItem('sanctum_token', token);
}
</script>
<template>
<AppLayout title="Dashboard">
<div class="grid gap-12 md:grid-cols-2 h-full md:p-8">
<div class="relative overflow-y-auto">
Geplante Aktivitäten
</div>
<div class="flex flex-col gap-8">
<div class="relative overflow-y-auto">
<div class="flex flex-wrap gap-2 overflow-x-auto">
<Alert class="bg-amber-300">
<Trophy class="h-4 w-4" />
<AlertTitle>Du hast zwei neue Erfolge</AlertTitle>
<AlertDescription class="text-sky-600">
</AlertDescription>
</Alert>
<Alert class="bg-sky-300">
<UserCheck2 class="h-4 w-4" />
<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>
</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>