Add initial Todo items and CalDAV sync
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import { onMounted, ref } from "vue"
|
||||
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { Trophy, ArrowRight, UserCheck2 } from 'lucide-vue-next';
|
||||
import { Trophy, ArrowRight, UserCheck2, Repeat, ClipboardCheck } 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';
|
||||
@@ -13,18 +13,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/com
|
||||
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,
|
||||
// },
|
||||
// }>()
|
||||
import { Todo } from "@/types";
|
||||
|
||||
const salesStatistics = ref({
|
||||
year: new Date().getFullYear(),
|
||||
@@ -46,6 +35,13 @@ if (token) {
|
||||
|
||||
onMounted(async () => {
|
||||
// Load sales statistics
|
||||
try {
|
||||
let response = await axios.get('/api/todos')
|
||||
todos.value = response.data
|
||||
} catch (error) {
|
||||
toast.error('Fehler beim Laden der Daten', { description: (error as AxiosError).message })
|
||||
}
|
||||
|
||||
try {
|
||||
let response = await axios.get('/api/invoices/salesStatistics')
|
||||
salesStatistics.value = response.data
|
||||
@@ -55,11 +51,7 @@ onMounted(async () => {
|
||||
})
|
||||
|
||||
|
||||
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' }
|
||||
])
|
||||
const todos = ref<Todo[]>([])
|
||||
|
||||
</script>
|
||||
|
||||
@@ -68,6 +60,76 @@ const todos = ref([
|
||||
<AppLayout title="Dashboard">
|
||||
<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">
|
||||
<CardHeader>
|
||||
<CardTitle>Aufgaben</CardTitle>
|
||||
<CardDescription>Card Description</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<!-- <h3 class="mb-4 font-bold text-md">Verspätet</h3> -->
|
||||
|
||||
<!-- TODO: make TodoList component -->
|
||||
<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">
|
||||
<!-- TODO: make Todo component -->
|
||||
<div
|
||||
class="mt-1 row-span-2 w-5 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary-foreground border-1 flex items-center justify-center">
|
||||
<div
|
||||
class="w-3.5 relative aspect-square rounded-full bg-transparent has-[input:checked]:bg-primary-foreground">
|
||||
<input type="checkbox" class="absolute -inset-2 opacity-0"
|
||||
:checked="todo.status?.toLowerCase() == 'completed'">
|
||||
</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"
|
||||
:class="{ 'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed' }">{{
|
||||
todo.title
|
||||
}}</span>
|
||||
<div class="grow"></div>
|
||||
<div class="text-muted-foreground">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-muted-foreground flex gap-3 items-center">
|
||||
<span v-if="todo.dueDate">{{ toLocalDate(todo.dueDate)}}</span>
|
||||
<Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Rechnungen -->
|
||||
<Card class="break-inside-avoid mb-12">
|
||||
<CardHeader>
|
||||
@@ -83,74 +145,11 @@ const todos = ref([
|
||||
</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>
|
||||
<CardHeader class="z-1">
|
||||
<CardTitle>Umsatz {{ salesStatistics?.year || '' }}</CardTitle>
|
||||
<CardDescription>Card Description</CardDescription>
|
||||
</CardHeader>
|
||||
@@ -227,35 +226,6 @@ const todos = ref([
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
Vendored
+54
@@ -165,6 +165,60 @@ export function newCustomer(): Customer {
|
||||
}
|
||||
}
|
||||
|
||||
export interface TodoType {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export function newTodoType(): TodoType {
|
||||
return {
|
||||
id: 0,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
export interface Todo {
|
||||
id: string;
|
||||
etag: string | null;
|
||||
title: string;
|
||||
description: string | null;
|
||||
typeId: number | null;
|
||||
type?: TodoType | null;
|
||||
url: string | null;
|
||||
dueDate: Date | null;
|
||||
recurring: boolean;
|
||||
priority: number;
|
||||
status: string;
|
||||
createdAt: Date;
|
||||
lastModified: Date;
|
||||
parent: string | null;
|
||||
parentTodo?: Todo | null;
|
||||
children?: Todo[];
|
||||
object: string | null;
|
||||
}
|
||||
|
||||
export function newTodo(): Todo {
|
||||
return {
|
||||
id: '',
|
||||
etag: null,
|
||||
title: '',
|
||||
description: null,
|
||||
typeId: null,
|
||||
type: null,
|
||||
url: null,
|
||||
dueDate: null,
|
||||
recurring: false,
|
||||
priority: 1,
|
||||
status: 'pending',
|
||||
createdAt: new Date(),
|
||||
lastModified: new Date(),
|
||||
parent: null,
|
||||
parentTodo: null,
|
||||
children: [],
|
||||
object: null
|
||||
}
|
||||
}
|
||||
|
||||
export type PaymentStatus = 'draft' | 'issued' | 'paid' | 'due' | 'reminded' | 'cancelled'
|
||||
|
||||
export interface Invoice {
|
||||
|
||||
Reference in New Issue
Block a user