Two month of work
This commit is contained in:
@@ -1,19 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue"
|
||||
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import { onMounted, ref, computed } from "vue"
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { Trophy, ArrowRight, UserCheck2, Repeat, ClipboardCheck } from 'lucide-vue-next';
|
||||
import { Trophy, ArrowRight, UserCheck2, Repeat, ClipboardCheck, X, ChevronRight } 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 { toLocalDate, toRoundedCurrency } from '@/lib/utils'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Badge } from '@/components/ui/crm-badge'
|
||||
import { Link, usePage } from '@inertiajs/vue3';
|
||||
import axios, { AxiosError } from "axios";
|
||||
import { toast } from "vue-sonner";
|
||||
import { Todo } from "@/types";
|
||||
import Todos from '@/components/Todos.vue';
|
||||
|
||||
const salesStatistics = ref({
|
||||
year: new Date().getFullYear(),
|
||||
@@ -25,16 +28,18 @@ const salesStatistics = ref({
|
||||
reminded: 0,
|
||||
})
|
||||
|
||||
// TODO: aus settings
|
||||
const salesTarget = ref(60000)
|
||||
const salesTarget = ref(60000) // TODO: aus settings
|
||||
const todos = ref<Todo[]>([])
|
||||
const showCompleted = ref(false)
|
||||
const page = usePage();
|
||||
const token = page.props.flash?.token
|
||||
if (token) {
|
||||
localStorage.setItem('sanctum_token', token)
|
||||
}
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// Load sales statistics
|
||||
// Load Todos
|
||||
try {
|
||||
let response = await axios.get('/api/todos')
|
||||
todos.value = response.data
|
||||
@@ -42,6 +47,7 @@ onMounted(async () => {
|
||||
toast.error('Fehler beim Laden der Daten', { description: (error as AxiosError).message })
|
||||
}
|
||||
|
||||
// Load sales statistics
|
||||
try {
|
||||
let response = await axios.get('/api/invoices/salesStatistics')
|
||||
salesStatistics.value = response.data
|
||||
@@ -50,95 +56,73 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const todos = ref<Todo[]>([])
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<AppLayout title="Dashboard">
|
||||
<Heading title="Tooloop Multimedia" description="Kundenpflege und Rechnungswesen" />
|
||||
|
||||
<div class="columns-1 lg:columns-2 xl:columns-3 gap-8">
|
||||
|
||||
|
||||
|
||||
<!-- Nachrichten -->
|
||||
<div class="break-inside-avoid mb-8 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>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- TODO: make widget component -->
|
||||
<!-- Aufgaben -->
|
||||
<Card class="break-inside-avoid mb-8">
|
||||
<Card class="break-inside-avoid mb-12">
|
||||
<CardHeader>
|
||||
<CardTitle>Aufgaben</CardTitle>
|
||||
<CardTitle>Benachrichtigungen</CardTitle>
|
||||
<CardDescription>Card Description</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="flex flex-col gap-4">
|
||||
|
||||
<Alert class="bg-muted pr-8">
|
||||
<Trophy class="h-4 w-4 stroke-amber-600" />
|
||||
<AlertTitle>Du hast zwei neue Erfolge</AlertTitle>
|
||||
<AlertDescription class="text-sky-600">
|
||||
Weiter so
|
||||
</AlertDescription>
|
||||
|
||||
<Button variant="ghost" class="rounded-full w-6 h-6 absolute top-0.5 right-0.5">
|
||||
<X />
|
||||
</Button>
|
||||
</Alert>
|
||||
|
||||
<Alert class="bg-muted pr-8">
|
||||
<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
|
||||
<ChevronRight class="inline h-4 w-4" />
|
||||
</a>
|
||||
</AlertDescription>
|
||||
|
||||
<Button variant="ghost" class="rounded-full w-6 h-6 absolute top-0.5 right-0.5">
|
||||
<X />
|
||||
</Button>
|
||||
</Alert>
|
||||
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button>Alles leeren</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
|
||||
<!-- Aufgaben -->
|
||||
<Card class="break-inside-avoid mb-8">
|
||||
<CardHeader class="flex justify-between flex-wrap">
|
||||
<div>
|
||||
<CardTitle class="mb-1.5">Aufgaben</CardTitle>
|
||||
<CardDescription class="mb-3">Card Description</CardDescription>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Switch id="show-completed" v-model="showCompleted" />
|
||||
<Label for="show-completed" class="text-muted-foreground">Erledigte</Label>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<!-- <h3 class="mb-4 font-bold text-md">Verspätet</h3> -->
|
||||
|
||||
<!-- TODO: make TodoList component -->
|
||||
<ul>
|
||||
<li v-for="todo in todos"
|
||||
class="flex gap-3 items-baseline border-b-1 last:border-0 border-foreground/20 py-2.5 pl-1 pr-2">
|
||||
<!-- TODO: make Todo component -->
|
||||
|
||||
<!-- Check mark -->
|
||||
<div
|
||||
class="relative top-0.75 shrink-0 h-4 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary-foreground border flex items-center justify-center">
|
||||
<div
|
||||
class="absolute inset-[2px] rounded-full bg-transparent has-[input:checked]:bg-primary-foreground">
|
||||
<input type="checkbox" class="absolute -inset-2 opacity-0"
|
||||
:checked="todo.status?.toLowerCase() == 'completed'" :id="todo.id">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text -->
|
||||
<div class="grow overflow-hidden truncate">
|
||||
<!-- Priority -->
|
||||
<span v-if="todo.priority < 5 && todo.priority > 0"
|
||||
class="mr-2 text-destructive">!!!</span>
|
||||
<span v-if="todo.priority == 5" class="mr-2 text-warning-foreground">!!</span>
|
||||
<span v-if="todo.priority > 5" class="mr-2 text-muted-foreground">!</span>
|
||||
<!-- Title -->
|
||||
<label :for="todo.id" class="my-0 px-0 text-base! border-0 outline-0 shadow-none"
|
||||
:class="{ 'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed' }">{{
|
||||
todo.title
|
||||
}}</label>
|
||||
|
||||
<!-- Date -->
|
||||
<div class="text-sm text-muted-foreground flex gap-3 items-center mt-1">
|
||||
<span v-if="todo.dueDate">{{ toLocalDate(todo.dueDate) }}</span>
|
||||
<Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icon -->
|
||||
<div class="relative top-0.75 text-muted-foreground shrink-0">
|
||||
<PhoneCall v-if="todo.type?.name === 'phoneCall'" stroke-width="1.5" :size="18" />
|
||||
<ClipboardCheck v-else-if="todo.type?.name === 'todo'" stroke-width="1.5" :size="18" />
|
||||
<Mail v-else-if="todo.type?.name === 'mail'" stroke-width="1.5" :size="18" />
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Todos :modelValue="todos" :show-completed="showCompleted" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -168,14 +152,11 @@ const todos = ref<Todo[]>([])
|
||||
<CardContent class="relative flex flex-col gap-3">
|
||||
|
||||
<div class="flex items-baseline justify-between">
|
||||
<span class="text-xl font-bold text-primary-foreground">{{
|
||||
<span class="text-xl font-bold text-primary">{{
|
||||
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 -->
|
||||
|
||||
Reference in New Issue
Block a user