flfeders/FEDEO
2
1
Fork 0
Code Issues 63 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Merge branch 'beta' into 'main'

Browse Source 
Beta

See merge request fedeo/software!55
This commit is contained in:
Florian Federspiel
2025-12-27 13:06:20 +00:00
parent d234a2371b 902e3ac59a
commit fb52f88ec3
26 changed files with 1064 additions and 833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
components/DocumentUploadModal.vue
View File

@@ -1,4 +1,6 @@
<script setup >
<script setup>
// Falls useDropZone nicht auto-importiert wird:
// import { useDropZone } from '@vueuse/core'
const props = defineProps({
fileData: {
@@ -12,11 +14,35 @@ const props = defineProps({
const emit = defineEmits(["uploadFinished"])
const modal = useModal()
const profileStore = useProfileStore()
// const profileStore = useProfileStore() // Wird im Snippet nicht genutzt, aber ich lasse es drin
const uploadInProgress = ref(false)
const availableFiletypes = ref([])
// 1. State für die Dateien und die Dropzone Referenz
const selectedFiles = ref([])
const dropZoneRef = ref(null)
// 2. Setup der Dropzone
const onDrop = (files) => {
// Wenn Dateien gedroppt werden, speichern wir sie
// files ist hier meist ein Array, wir stellen sicher, dass es passt
selectedFiles.value = files || []
}
const { isOverDropZone } = useDropZone(dropZoneRef, {
onDrop,
// Verhindert, dass der Browser das Bild einfach öffnet
preventDefaultForDrop: true,
})
// 3. Handler für den klassischen Datei-Input Klick
const onFileInputChange = (e) => {
if (e.target.files) {
selectedFiles.value = Array.from(e.target.files)
}
}
const setup = async () => {
availableFiletypes.value = await useEntities("filetags").select()
}
@@ -24,81 +50,112 @@ const setup = async () => {
setup()
const uploadFiles = async () => {
// Validierung: Keine Dateien ausgewählt
if (!selectedFiles.value || selectedFiles.value.length === 0) {
alert("Bitte wählen Sie zuerst Dateien aus.") // Oder eine schönere Toast Notification
return
}
uploadInProgress.value = true;
let fileData = props.fileData
delete fileData.typeEnabled
await useFiles().uploadFiles(fileData, document.getElementById("fileUploadInput").files,[],true)
// 4. Hier nutzen wir nun selectedFiles.value statt document.getElementById
await useFiles().uploadFiles(fileData, selectedFiles.value, [], true)
uploadInProgress.value = false;
emit("uploadFinished")
modal.close()
}
// Helper Funktion um Dateinamen anzuzeigen (da das Input Feld leer bleibt beim Droppen)
const fileNames = computed(() => {
if (!selectedFiles.value.length) return ''
return selectedFiles.value.map(f => f.name).join(', ')
})
</script>
<template>
<UModal>
<UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Datei hochladen
</h3>
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-x-mark-20-solid"
class="-my-1"
@click="modal.close()"
:disabled="uploadInProgress"
/>
</div>
</template>
<div ref="dropZoneRef" class="relative h-full flex flex-col">
<UFormGroup
label="Datei:"
<div
v-if="isOverDropZone"
class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
>
<UInput
type="file"
id="fileUploadInput"
multiple
accept="image/jpeg, image/png, image/gif, application/pdf"
/>
</UFormGroup>
<UFormGroup
label="Typ:"
class="mt-3"
>
<USelectMenu
option-attribute="name"
value-attribute="id"
searchable
searchable-placeholder="Suchen..."
:options="availableFiletypes"
v-model="props.fileData.type"
:disabled="!props.fileData.typeEnabled"
<span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
Dateien hier ablegen
</span>
</div>
<UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Datei hochladen
</h3>
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-x-mark-20-solid"
class="-my-1"
@click="modal.close()"
:disabled="uploadInProgress"
/>
</div>
</template>
<UFormGroup
label="Datei:"
:help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
>
<template #label>
<span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
<span v-else>Keine Typ ausgewählt</span>
</template>
</USelectMenu>
</UFormGroup>
<UInput
v-if="selectedFiles.length === 0"
type="file"
id="fileUploadInput"
multiple
accept="image/jpeg, image/png, image/gif, application/pdf"
@change="onFileInputChange"
/>
<template #footer>
<UButton
@click="uploadFiles"
:loading="uploadInProgress"
:disabled="uploadInProgress"
>Hochladen</UButton>
</template>
</UCard>
<div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
</div>
</UFormGroup>
<UFormGroup
label="Typ:"
class="mt-3"
>
<USelectMenu
option-attribute="name"
value-attribute="id"
searchable
searchable-placeholder="Suchen..."
:options="availableFiletypes"
v-model="props.fileData.type"
:disabled="!props.fileData.typeEnabled"
>
<template #label>
<span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
<span v-else>Kein Typ ausgewählt</span>
</template>
</USelectMenu>
</UFormGroup>
<template #footer>
<UButton
@click="uploadFiles"
:loading="uploadInProgress"
:disabled="uploadInProgress || selectedFiles.length === 0"
>Hochladen</UButton>
</template>
</UCard>
</div>
</UModal>
</template>
<style scoped>
/* Optional: Animationen für das Overlay */
</style>

1
components/EntityShowSubCreatedDocuments.vue
View File

@@ -107,7 +107,6 @@ const getAvailableQueryStringData = (keys) => {
returnString += `${key}=${value}`
} else {
returnString += `&${key}=${value}`
}
}

302
components/StaffTimeEntryModal.vue
View File

@@ -1,206 +1,170 @@
<script setup lang="ts">
import dayjs from "dayjs";
import { z } from 'zod'
import type { FormSubmitEvent } from '#ui/types'
import { useStaffTime } from '~/composables/useStaffTime'
const props = defineProps<{
modelValue: boolean;
entry?: any | null;
users: any[];
canSelectUser: boolean;
defaultUserId: string;
}>();
const props = defineProps({
modelValue: { type: Boolean, default: false },
entry: { type: Object, default: null },
defaultUserId: { type: String, default: null }
})
const emit = defineEmits(["update:modelValue", "saved"]);
const emit = defineEmits(['update:modelValue', 'saved'])
const { create, update } = useStaffTime();
// 💡 createEntry importieren
const { update, createEntry } = useStaffTime()
const { $dayjs } = useNuxtApp()
const toast = useToast()
const show = computed({
const loading = ref(false)
const types = [
{ label: 'Arbeitszeit', value: 'work' },
{ label: 'Pause', value: 'pause' },
{ label: 'Urlaub', value: 'vacation' },
{ label: 'Krankheit', value: 'sick' },
{ label: 'Feiertag', value: 'holiday' },
{ label: 'Sonstiges', value: 'other' }
]
const state = reactive({
start_date: '',
start_time: '',
end_date: '',
end_time: '',
type: 'work',
description: ''
})
const schema = z.object({
start_date: z.string().min(1, 'Datum erforderlich'),
start_time: z.string().min(1, 'Zeit erforderlich'),
type: z.string(),
description: z.string().optional()
})
const isOpen = computed({
get: () => props.modelValue,
set: (v: boolean) => emit("update:modelValue", v),
});
set: (value) => emit('update:modelValue', value)
})
// 🌈 Typen
const typeOptions = [
{ label: "Arbeitszeit", value: "work" },
{ label: "Urlaub", value: "vacation" },
{ label: "Krankheit", value: "sick" },
{ label: "Feiertag", value: "holiday" },
];
const toDateStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('YYYY-MM-DD') : ''
const toTimeStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('HH:mm') : ''
// Lokaler State
const local = reactive({
id: "",
user_id: "", // 👈 Mitarbeiter
description: "",
started_at: "",
stopped_at: "",
type: "work",
vacation_reason: "",
sick_reason: "",
});
watch(() => props.entry, (newVal) => {
if (newVal) {
// EDIT
state.start_date = toDateStr(newVal.started_at)
state.start_time = toTimeStr(newVal.started_at)
state.end_date = newVal.stopped_at ? toDateStr(newVal.stopped_at) : ''
state.end_time = newVal.stopped_at ? toTimeStr(newVal.stopped_at) : ''
state.type = newVal.type || 'work'
state.description = newVal.description || ''
} else {
// CREATE (Standardwerte: Heute)
const now = $dayjs()
state.start_date = now.format('YYYY-MM-DD')
state.start_time = now.format('HH:mm')
state.end_date = ''
state.end_time = ''
state.type = 'work'
state.description = ''
}
}, { immediate: true })
// 📡 ENTRY —> LOCAL
watch(
() => props.entry,
(val) => {
if (val) {
Object.assign(local, {
id: val.id,
user_id: val.user_id, // 👈 Mitarbeiter vorbelegen
description: val.description || "",
type: val.type || "work",
started_at:
val.type === "vacation"
? dayjs(val.started_at).format("YYYY-MM-DD")
: dayjs(val.started_at).format("YYYY-MM-DDTHH:mm"),
stopped_at:
val.type === "vacation"
? dayjs(val.stopped_at).format("YYYY-MM-DD")
: dayjs(val.stopped_at).format("YYYY-MM-DDTHH:mm"),
vacation_reason: val.vacation_reason || "",
sick_reason: val.sick_reason || "",
});
} else {
Object.assign(local, {
id: "",
user_id: props.defaultUserId, // 👈 Neuer Eintrag → aktueller Nutzer
description: "",
type: "work",
started_at: dayjs().format("YYYY-MM-DDTHH:mm"),
stopped_at: dayjs().add(1, "hour").format("YYYY-MM-DDTHH:mm"),
vacation_reason: "",
sick_reason: "",
});
}
},
{ immediate: true }
);
const loading = ref(false);
async function handleSubmit() {
loading.value = true;
async function onSubmit(event: FormSubmitEvent<any>) {
loading.value = true
try {
const payload: any = {
user_id: local.user_id, // 👈 immer senden
type: local.type,
};
// 1. Datum und Zeit kombinieren
const startIso = $dayjs(`${state.start_date} ${state.start_time}`).toISOString()
if (local.type === "vacation") {
payload.started_at = dayjs(local.started_at).startOf("day").toISOString();
payload.stopped_at = dayjs(local.stopped_at).endOf("day").toISOString();
payload.vacation_reason = local.vacation_reason;
} else {
payload.started_at = dayjs(local.started_at).toISOString();
payload.stopped_at = local.stopped_at
? dayjs(local.stopped_at).toISOString()
: null;
payload.description = local.description;
let endIso = null
if (state.end_date && state.end_time) {
endIso = $dayjs(`${state.end_date} ${state.end_time}`).toISOString()
if (local.type === "sick") {
payload.sick_reason = local.sick_reason;
if ($dayjs(endIso).isBefore($dayjs(startIso))) {
throw new Error("Endzeitpunkt muss nach dem Startzeitpunkt liegen.")
}
}
if (local.id) {
await update(local.id, payload);
if (props.entry) {
// 🟢 UPDATE (Bearbeiten)
await update(props.entry, {
start: startIso,
end: endIso,
type: state.type,
description: state.description
})
toast.add({ title: 'Eintrag aktualisiert', color: 'green' })
} else {
await create(payload);
// 🟢 CREATE (Neu Erstellen)
// 💡 HIER WAR DER FEHLER: Wir nutzen jetzt createEntry mit den Daten aus dem Formular
await createEntry({
start: startIso, // Die eingegebene Startzeit
end: endIso, // Die eingegebene Endzeit (oder null)
type: state.type,
description: state.description
})
toast.add({ title: 'Zeit manuell erfasst', color: 'green' })
}
emit("saved");
show.value = false;
emit('saved')
isOpen.value = false
} catch (error: any) {
toast.add({ title: 'Fehler', description: error.message, color: 'red' })
} finally {
loading.value = false;
loading.value = false
}
}
</script>
<template>
<UModal v-model="show" :ui="{ width: 'w-full sm:max-w-md' }" :key="local.id || 'new'">
<UCard>
<UModal v-model="isOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="font-semibold text-lg">
{{ local.id ? "Zeit bearbeiten" : "Neue Zeit erfassen" }}
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
{{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</div>
</template>
<UForm @submit.prevent="handleSubmit" class="space-y-4">
<UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
<!-- 👥 Mitarbeiter-Auswahl -->
<UFormGroup label="Mitarbeiter" v-if="props.canSelectUser">
<USelectMenu
v-model="local.user_id"
:options="props.users.map(u => ({
label: u.full_name || u.email,
value: u.user_id
}))"
placeholder="Mitarbeiter wählen"
option-attribute="label"
value-attribute="value"
/>
<UFormGroup label="Typ" name="type">
<USelectMenu v-model="state.type" :options="types" value-attribute="value" option-attribute="label" />
</UFormGroup>
<!-- TYPE -->
<UFormGroup label="Typ">
<USelect v-model="local.type" :options="typeOptions" />
<div class="grid grid-cols-2 gap-4">
<UFormGroup label="Start Datum" name="start_date">
<UInput type="date" v-model="state.start_date" />
</UFormGroup>
<UFormGroup label="Start Zeit" name="start_time">
<UInput type="time" v-model="state.start_time" />
</UFormGroup>
</div>
<div class="grid grid-cols-2 gap-4">
<UFormGroup label="Ende Datum" name="end_date">
<UInput type="date" v-model="state.end_date" />
</UFormGroup>
<UFormGroup label="Ende Zeit" name="end_time">
<UInput type="time" v-model="state.end_time" />
</UFormGroup>
</div>
<p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>
<UFormGroup label="Beschreibung / Notiz" name="description">
<UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
</UFormGroup>
<!-- VACATION -->
<template v-if="local.type === 'vacation'">
<UFormGroup label="Urlaubsgrund">
<UInput v-model="local.vacation_reason" />
</UFormGroup>
<UFormGroup label="Start (Tag)">
<UInput v-model="local.started_at" type="date" />
</UFormGroup>
<UFormGroup label="Ende (Tag)">
<UInput v-model="local.stopped_at" type="date" />
</UFormGroup>
</template>
<!-- SICK -->
<template v-else-if="local.type === 'sick'">
<UFormGroup label="Krankheitsgrund">
<UInput v-model="local.sick_reason" />
</UFormGroup>
<UFormGroup label="Start (Tag)">
<UInput v-model="local.started_at" type="date" />
</UFormGroup>
<UFormGroup label="Ende (Tag)">
<UInput v-model="local.stopped_at" type="date" />
</UFormGroup>
</template>
<!-- WORK / OTHER -->
<template v-else>
<UFormGroup label="Beschreibung">
<UInput v-model="local.description" placeholder="Was wurde gemacht?" />
</UFormGroup>
<UFormGroup label="Startzeit">
<UInput v-model="local.started_at" type="datetime-local" />
</UFormGroup>
<UFormGroup label="Endzeit">
<UInput v-model="local.stopped_at" type="datetime-local" />
</UFormGroup>
</template>
<!-- ACTIONS -->
<div class="flex justify-end gap-2 mt-4">
<UButton color="gray" label="Abbrechen" @click="show = false" />
<UButton color="primary" :loading="loading" type="submit" label="Speichern" />
<div class="flex justify-end gap-2 pt-4">
<UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
<UButton type="submit" label="Speichern" color="primary" :loading="loading" />
</div>
</UForm>
</UCard>
</UModal>
</template>
</template>

1
components/columnRenderings/address.vue
View File

@@ -9,6 +9,7 @@ const props = defineProps({
</script>
<template>
<span v-if="props.row.infoData.streetNumber">{{props.row.infoData.streetNumber}},</span>
<span v-if="props.row.infoData.street">{{props.row.infoData.street}},</span>
<span v-if="props.row.infoData.special">{{props.row.infoData.special}},</span>
<span v-if="props.row.infoData.zip">{{props.row.infoData.zip}},</span>

2
components/columnRenderings/purchasePrice.vue
View File

@@ -9,5 +9,5 @@ const props = defineProps({
</script>
<template>
<span>{{props.row.purchasePrice ? useCurrency(props.row.purchasePrice) : ''}}</span>
<span>{{props.row.purchase_price ? useCurrency(props.row.purchase_price) : ''}}</span>
</template>

2
components/columnRenderings/sellingPrice.vue
View File

@@ -9,5 +9,5 @@ const props = defineProps({
</script>
<template>
<span>{{props.row.sellingPrice ? useCurrency(props.row.sellingPrice) : ''}}</span>
<span>{{props.row.selling_price ? useCurrency(props.row.selling_price) : ''}}</span>
</template>

2
components/copyCreatedDocumentModal.vue
View File

@@ -60,7 +60,7 @@ const mappings = ref({
})
const startImport = () => {
router.push(`/createDocument/edit/?linkedDocument=${props.id}&type=${documentTypeToUse.value}&optionsToImport=${encodeURIComponent(JSON.stringify(optionsToImport.value))}`)
router.push(`/createDocument/edit/?createddocument=${props.id}&type=${documentTypeToUse.value}&optionsToImport=${encodeURIComponent(JSON.stringify(optionsToImport.value))}`)
modal.close()
}
</script>

2
components/displayOpenBalances.vue
View File

@@ -22,7 +22,7 @@ const setupPage = async () => {
finalizedDocuments = finalizedDocuments.filter(i => i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i, documents).toFixed(2))
finalizedDocuments = finalizedDocuments.filter(x => (x.type === 'invoices' || x.type === 'advanceInvoices') && x.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === x.id))
finalizedDocuments = finalizedDocuments.filter(x => (x.type === 'invoices' || x.type === 'advanceInvoices') && x.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === x.id))

2
components/materialComposing.vue
View File

@@ -53,7 +53,7 @@ const setRowData = (row) => {
let product = products.value.find(i => i.id === row.product)
row.unit = product.unit
row.price = product.sellingPrice
row.price = product.selling_price
calculateTotalMaterialPrice()
}

4
composables/useEntities.ts
View File

@@ -134,11 +134,11 @@ export const useEntities = (
const selectSingle = async (
idToEq: string | number,
select: string = "*",
withInformation: boolean = false
withInformation: boolean = true
) => {
if (!idToEq) return null
const res = await useNuxtApp().$api(withInformation ? `/api/resource/${relation}/${idToEq}` : `/api/resource/${relation}/${idToEq}`, {
const res = await useNuxtApp().$api(withInformation ? `/api/resource/${relation}/${idToEq}` : `/api/resource/${relation}/${idToEq}/true`, {
method: "GET",
params: { select }
})

15
composables/useFunctions.js
View File

@@ -7,7 +7,20 @@ export const useFunctions = () => {
const supabase = useSupabaseClient()
const getWorkingTimesEvaluationData = async (user_id, startDate, endDate) => {
return (await useNuxtApp().$api(`/api/functions/timeevaluation/${user_id}?start_date=${startDate}&end_date=${endDate}`))
// Der neue Endpunkt ist /staff/time/evaluation und erwartet die Benutzer-ID als targetUserId Query-Parameter.
// Wir bauen den Query-String zusammen.
const queryParams = new URLSearchParams({
from: startDate,
to: endDate,
targetUserId: user_id, // Die ID wird als targetUserId übergeben
});
// Der neue API-Pfad verwendet nur noch den Basis-Endpunkt.
const url = `/api/staff/time/evaluation?${queryParams.toString()}`;
// Annahme: useNuxtApp().$api führt den GET-Request aus und liefert die Daten zurück.
return (await useNuxtApp().$api(url));
}
const useNextNumber = async (numberRange) => {

154
composables/useStaffTime.ts
View File

@@ -1,77 +1,119 @@
interface StaffTimeEntry {
id: string
started_at: string
stopped_at?: string | null
duration_minutes?: number | null
type: string
description?: string | null
created_at?: string
}
import { defineStore } from 'pinia'
import { useAuthStore } from '~/stores/auth'
export function useStaffTime() {
const { $api } = useNuxtApp()
export const useStaffTime = () => {
const { $api, $dayjs } = useNuxtApp()
const auth = useAuthStore()
async function list(params?: { user_id?: string }) {
const query = new URLSearchParams()
if (params?.user_id) query.append("user_id", params.user_id)
return await $api(`/api/staff/time${query.toString() ? `?${query}` : ''}`, { method: 'GET' })
// ... (list Funktion bleibt gleich) ...
const list = async (filter?: { user_id?: string, from?: string, to?: string }) => {
// ... (Code wie zuvor)
const from = filter?.from || $dayjs().startOf('month').format('YYYY-MM-DD')
const to = filter?.to || $dayjs().endOf('month').format('YYYY-MM-DD')
const targetUserId = filter?.user_id || auth.user.id
const params = new URLSearchParams({ from, to, targetUserId })
try {
const spans = await $api(`/api/staff/time/spans?${params.toString()}`)
return (spans || []).map((span: any) => {
const start = $dayjs(span.startedAt)
const end = span.endedAt ? $dayjs(span.endedAt) : $dayjs()
return {
id: span.sourceEventIds && span.sourceEventIds.length > 0 ? span.sourceEventIds[0] : null,
eventIds: span.sourceEventIds || [],
state: span.status,
started_at: span.startedAt,
stopped_at: span.endedAt,
duration_minutes: end.diff(start, 'minute'),
user_id: targetUserId,
type: span.type,
description: span.payload?.description || ''
}
}).sort((a: any, b: any) => $dayjs(b.started_at).valueOf() - $dayjs(a.started_at).valueOf())
} catch (error) {
console.error("Fehler beim Laden:", error)
return []
}
}
async function start(description?: string) {
return await $api<StaffTimeEntry>('/api/staff/time', {
/**
* Startet "jetzt" (Live-Modus).
* Kann optional eine Zeit empfangen (für manuelle Korrekturen),
* aber wir nutzen dafür besser die createEntry Funktion unten.
*/
const start = async (description = "Arbeitszeit", time?: string) => {
await $api('/api/staff/time/event', {
method: 'POST',
body: {
started_at: new Date().toISOString(),
type: 'work',
description,
},
eventtype: 'work_start',
eventtime: time || new Date().toISOString(), // 💡 Fix: Zeit akzeptieren
payload: { description }
}
})
}
async function stop(id: string) {
return await $api<StaffTimeEntry>(`/api/staff/time/${id}/stop`, {
method: 'PUT',
body: { stopped_at: new Date().toISOString() },
})
const stop = async () => {
await $api('/api/staff/time/event', { method: 'POST', body: { eventtype: 'work_end', eventtime: new Date().toISOString() } })
}
async function submit(id: string) {
return await $api<StaffTimeEntry>(`/api/staff/time/${id}`, {
method: 'PUT',
body: { state: 'submitted' },
})
const submit = async (entry: any) => {
const ids = entry.eventIds || (entry.id ? [entry.id] : [entry]);
if (!ids || ids.length === 0) return
await $api('/api/staff/time/submit', { method: 'POST', body: { eventIds: ids } })
}
async function approve(id: string) {
const auth = useAuthStore()
const now = useNuxtApp().$dayjs().toISOString()
const approve = async (entry: any) => {
if (!entry?.user_id) return
const ids = entry.eventIds || [entry.id];
await $api('/api/staff/time/approve', { method: 'POST', body: { eventIds: ids, employeeUserId: entry.user_id } })
}
return await $api(`/api/staff/time/${id}`, {
method: 'PUT',
const reject = async (entry: any, reason = "Abgelehnt") => {
if (!entry?.user_id) return
const ids = entry.eventIds || [entry.id];
await $api('/api/staff/time/reject', { method: 'POST', body: { eventIds: ids, employeeUserId: entry.user_id, reason } })
}
const update = async (entry: any, newData: { start: string, end: string | null, type: string, description: string }) => {
if (!entry || !entry.eventIds || entry.eventIds.length === 0) {
throw new Error("Bearbeiten fehlgeschlagen: Keine IDs.")
}
await $api('/api/staff/time/edit', {
method: 'POST',
body: {
state: 'approved',
//@ts-ignore
approved_by: auth.user.id,
approved_at: now,
},
originalEventIds: entry.eventIds,
newStart: newData.start,
newEnd: newData.end,
newType: newData.type,
description: newData.description,
reason: "Manuelle Bearbeitung"
}
})
}
async function get(id: string) {
return await $api<StaffTimeEntry>(`/api/staff/time/${id}`, { method: 'GET' })
// 🆕 NEU: Manuellen Eintrag erstellen (Vergangenheit oder Zeitraum)
const createEntry = async (data: { start: string, end: string | null, type: string, description: string }) => {
// 1. Start Event senden
// Wir nutzen den dynamischen Typ (work_start, vacation_start etc.)
await $api('/api/staff/time/event', {
method: 'POST',
body: {
eventtype: `${data.type}_start`,
eventtime: data.start,
payload: { description: data.description }
}
})
// 2. End Event senden (falls vorhanden)
if (data.end) {
await $api('/api/staff/time/event', {
method: 'POST',
body: {
eventtype: `${data.type}_end`,
eventtime: data.end
}
})
}
}
async function create(data: Record<string, any>) {
return await $api('/api/staff/time', { method: 'POST', body: data })
}
async function update(id: string, data: Record<string, any>) {
return await $api(`/api/staff/time/${id}`, { method: 'PUT', body: data })
}
return { list, start, stop,submit,approve, get, create, update }
}
return { list, start, stop, submit, approve, reject, update, createEntry }
}

2
nuxt.config.ts
View File

@@ -7,7 +7,7 @@ export default defineNuxtConfig({
}
},
modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxtjs/supabase', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', 'nuxt-tiptap-editor', '@nuxtjs/leaflet'],
modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxtjs/supabase', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', 'nuxt-tiptap-editor', '@nuxtjs/leaflet', '@vueuse/nuxt'],
ssr: false,

11
package.json
View File

@@ -13,6 +13,8 @@
"@capacitor/cli": "^7.0.0",
"@nuxtjs/leaflet": "^1.2.3",
"@nuxtjs/supabase": "^1.1.4",
"@vueuse/core": "^14.1.0",
"@vueuse/nuxt": "^14.1.0",
"nuxt": "^3.14.1592",
"nuxt-tiptap-editor": "^1.2.0",
"vue": "^3.5.13",
@@ -35,6 +37,7 @@
"@fullcalendar/timegrid": "^6.1.10",
"@fullcalendar/vue3": "^6.1.10",
"@iconify/json": "^2.2.171",
"@mmote/niimbluelib": "^0.0.1-alpha.29",
"@nuxt/ui-pro": "^1.6.0",
"@nuxtjs/fontaine": "^0.4.1",
"@nuxtjs/google-fonts": "^3.1.0",
@@ -63,7 +66,9 @@
"dayjs": "^1.11.10",
"fast-sort": "^3.4.1",
"handlebars": "^4.7.8",
"image-js": "^1.1.0",
"leaflet": "^1.9.4",
"license-checker": "^25.0.1",
"maplibre-gl": "^4.7.0",
"nuxt-editorjs": "^1.0.4",
"nuxt-viewport": "^2.0.6",
@@ -80,6 +85,8 @@
"vue-chartjs": "^5.3.1",
"vuedraggable": "^4.1.0",
"vuetify": "^3.4.0-beta.1",
"zebra-browser-print-wrapper": "^0.1.4"
"zebra-browser-print-wrapper": "^0.1.4",
"zod": "^3.25.76",
"zpl-renderer-js": "^2.0.2"
}
}
}

6
pages/banking/index.vue
View File

@@ -58,7 +58,7 @@ const clearSearchString = () => {
searchString.value = ''
}
const filterAccount = ref(bankaccounts || [])
const filterAccount = ref(bankaccounts.value || [])
const displayCurrency = (value, currency = "€") => {
return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
@@ -150,7 +150,7 @@ setupPage()
</USelectMenu>
</template>
<template #right>
<USelectMenu
<!-- <USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
@@ -162,7 +162,7 @@ setupPage()
<template #label>
Spalten
</template>
</USelectMenu>
</USelectMenu>-->
<USelectMenu
icon="i-heroicons-adjustments-horizontal-solid"
multiple

44
pages/banking/statements/[mode]/[[id]].vue
View File

@@ -12,7 +12,7 @@ defineShortcuts({
})
const dataStore = useDataStore()
const profileStore = useProfileStore()
const tempStore = useTempStore()
const route = useRoute()
const router = useRouter()
const mode = ref(route.params.mode || "show")
@@ -29,7 +29,7 @@ const customers = ref([])
const vendors = ref([])
const createddocuments = ref([])
const incominginvoices = ref([])
const accounts = ref([])
const ownaccounts = ref([])
@@ -45,7 +45,7 @@ const setup = async () => {
createddocuments.value = (await useEntities("createddocuments").select("*, statementallocations(*), customer(id,name)"))
const documents = createddocuments.value.filter(i => i.type === "invoices" ||i.type === "advanceInvoices")
const incominginvoices = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(id,name)")).filter(i => i.state === "Gebucht")
incominginvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(id,name)")).filter(i => i.state === "Gebucht")
accounts.value = (await useEntities("accounts").selectSpecial("*","number",true))
ownaccounts.value = (await useEntities("ownaccounts").select())
@@ -66,7 +66,7 @@ const setup = async () => {
console.log(openDocuments.value)
allocatedDocuments.value = documents.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
allocatedIncomingInvoices.value = incominginvoices.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
allocatedIncomingInvoices.value = incominginvoices.value.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
console.log(allocatedDocuments.value)
console.log(allocatedIncomingInvoices.value)
openIncomingInvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)")).filter(i => !i.archived && i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i,false))
@@ -177,7 +177,14 @@ const removeAllocation = async (allocationId) => {
await setup()
}
const searchString = ref("")
const searchString = ref(tempStore.searchStrings["bankstatementsedit"] ||'')
const clearSearchString = () => {
searchString.value = ''
tempStore.clearSearchString("bankstatementsedit")
}
const filteredDocuments = computed(() => {
@@ -509,11 +516,11 @@ const archiveStatement = async () => {
</UCard>
<UCard
class="mt-5"
v-for="item in itemInfo.statementallocations.filter(i => i.ii_id)"
v-for="item in itemInfo.statementallocations.filter(i => i.incominginvoice)"
>
<template #header>
<div class="flex flex-row justify-between">
<span>{{item.ii_id.reference}} - {{vendors.find(i => i.id === item.ii_id.vendor).name}}</span>
<span> {{incominginvoices.find(i => i.id === item.incominginvoice).reference}} - {{incominginvoices.find(i => i.id === item.incominginvoice).vendor?.name}}</span>
<span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
</div>
</template>
@@ -529,11 +536,11 @@ const archiveStatement = async () => {
</UCard>
<UCard
class="mt-5"
v-for="item in itemInfo.statementallocations.filter(i => i.cd_id)"
v-for="item in itemInfo.statementallocations.filter(i => i.createddocument)"
>
<template #header>
<div class="flex flex-row justify-between">
<span v-if="customers.find(i => i.id === item.cd_id.customer)">{{item.cd_id.documentNumber}} - {{customers.find(i => i.id === item.cd_id.customer).name}}</span>
<span v-if="customers.find(i => i.id === createddocuments.find(i => i.id === item.createddocument).customer?.id)">{{createddocuments.find(i => i.id === item.createddocument).documentNumber}} - {{createddocuments.find(i => i.id === item.createddocument).customer?.name}}</span>
<span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
</div>
</template>
@@ -546,7 +553,15 @@ const archiveStatement = async () => {
class="mr-3 mt-3"
@click="removeAllocation(item.id)"
/>
<UButton
icon="i-heroicons-eye"
variant="outline"
color="primary"
class="mr-3 mt-3"
@click="navigateTo(`/createDocument/show/${item.createddocument}`)"
/>
</UCard>
</div>
</div>
@@ -780,6 +795,7 @@ const archiveStatement = async () => {
placeholder="Suche..."
class="hidden lg:block w-full mr-1"
@keydown.esc="$event.target.blur()"
@change="tempStore.modifySearchString('bankstatementsedit',searchString)"
>
<template #trailing>
<UKbd value="/" />
@@ -789,7 +805,7 @@ const archiveStatement = async () => {
variant="outline"
icon="i-heroicons-x-mark"
color="rose"
@click="searchString = ''"
@click="clearSearchString"
/>
</InputGroup>
</div>
@@ -810,8 +826,8 @@ const archiveStatement = async () => {
icon="i-heroicons-check"
variant="outline"
class="mr-3"
v-if="!itemInfo.statementallocations.find(i => i.cd_id === document.id)"
@click="saveAllocation({cd_id: document.id, bankstatement: itemInfo.id, amount: Number(Number(document.openSum) < manualAllocationSum ? document.openSum : manualAllocationSum), description: allocationDescription})"
v-if="!itemInfo.statementallocations.find(i => i.createddocument === document.id)"
@click="saveAllocation({createddocument: document.id, bankstatement: itemInfo.id, amount: Number(Number(document.openSum) < manualAllocationSum ? document.openSum : manualAllocationSum), description: allocationDescription})"
/>
<UButton
@@ -835,8 +851,8 @@ const archiveStatement = async () => {
icon="i-heroicons-check"
variant="outline"
class="mr-3"
v-if="!itemInfo.statementallocations.find(i => i.ii_id === item.id)"
@click="saveAllocation({ii_id: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)"
@click="saveAllocation({incominginvoice: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
/>
<UButton
variant="outline"

37
pages/createDocument/edit/[[id]].vue
View File

@@ -109,7 +109,7 @@ const setupPage = async () => {
if (route.params) {
if (route.params.id) {
console.log(route.params)
itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id)
itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,'',false)
await setContactPersonData()
checkCompatibilityWithInputPrice()
}
@@ -141,9 +141,9 @@ const setupPage = async () => {
//TODO: Implement Checking for Same Customer, Contact and Project
itemInfo.value.customer = linkedDocuments[0].customer
itemInfo.value.project = linkedDocuments[0].project
itemInfo.value.contact = linkedDocuments[0].contact
itemInfo.value.customer = linkedDocuments[0].customer ? linkedDocuments[0].customer.id : null
itemInfo.value.project = linkedDocuments[0].project ? linkedDocuments[0].project.id : null
itemInfo.value.contact = linkedDocuments[0].contact ? linkedDocuments[0].contact.id : null
setCustomerData()
@@ -276,9 +276,9 @@ const setupPage = async () => {
}
if (route.query.linkedDocument) {
itemInfo.value.linkedDocument = route.query.linkedDocument
let linkedDocument = await useEntities("createddocuments").selectSingle(itemInfo.value.linkedDocument)
if (route.query.createddocument) {
itemInfo.value.createddocument = route.query.createddocument
let linkedDocument = await useEntities("createddocuments").selectSingle(itemInfo.value.createddocument,'',false)
if (route.query.optionsToImport) {
//Import only true
@@ -1428,7 +1428,8 @@ const closeDocument = async () => {
fileData.folder = folders.find(i => i.function === mappedType && i.year === Number(dayjs().format("YYYY"))).id
const tags = await useEntities("filetags").select()
fileData.type = tags.find(i => i.createddocumenttype === mappedType).id
console.log(tags)
fileData.type = tags.find(i => i.createdDocumentType === mappedType).id
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(","),
@@ -1506,7 +1507,20 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
}
if (row.service) {
row.unit = service.unit ? service.unit : services.value.find(i => i.id === row.service).unit
console.log(service)
if(service.unit) {
row.unit = service.unit
} else {
let selectedService = services.value.find(i => i.id === row.service)
console.log(selectedService)
if(selectedService.unit?.id) {
row.unit = selectedService.unit.id
} else {
row.unit = selectedService.unit
}
}
//row.unit = service.unit ? service.unit : services.value.find(i => i.id === row.service).unit
row.inputPrice = ((service.sellingPriceComposed.total || service.sellingPrice) ? (service.sellingPriceComposed.total || service.sellingPrice) : (services.value.find(i => i.id === row.service).sellingPriceComposed.total || services.value.find(i => i.id === row.service).sellingPrice))
row.description = service.description ? service.description : (services.value.find(i => i.id === row.service) ? services.value.find(i => i.id === row.service).description : "")
@@ -1520,14 +1534,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
if (row.product) {
console.log("Product Detected")
row.unit = product.unit ? product.unit : products.value.find(i => i.id === row.product).unit
row.inputPrice = (product.sellingPrice ? product.sellingPrice : products.value.find(i => i.id === row.product).sellingPrice)
row.inputPrice = (product.selling_price ? product.selling_price : products.value.find(i => i.id === row.product).selling_price)
//row.price = Number((row.originalPrice * (1 + itemInfo.value.customSurchargePercentage /100)).toFixed(2))
row.description = product.description ? product.description : (products.value.find(i => i.id === row.product) ? products.value.find(i => i.id === row.product).description : "")
if (['13b UStG', '19 UStG'].includes(itemInfo.value.taxType)) {
row.taxPercent = 0
} else {
row.taxPercent = product.taxPercentage ? product.taxPercentage : products.value.find(i => i.id === row.product).taxPercentage
row.taxPercent = product.tax_percentage ? product.tax_percentage : products.value.find(i => i.id === row.product).tax_percentage
}
}
@@ -1584,7 +1598,6 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<UTabs class="p-5" :items="tabItems" @change="onChangeTab" v-if="loaded" v-model="selectedTab">
<template #item="{item}">
<div v-if="item.label === 'Editor'">
<UAlert
class="my-5"
title="Vorhandene Probleme und Informationen:"

110
pages/createDocument/index.vue
View File

@@ -1,26 +1,26 @@
<template>
<UDashboardNavbar title="Ausgangsbelege" :badge="filteredRows.length">
<UDashboardNavbar :badge="filteredRows.length" title="Ausgangsbelege">
<template #right>
<UInput
id="searchinput"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
icon="i-heroicons-funnel"
placeholder="Suche..."
@change="tempStore.modifySearchString('createddocuments',searchString)"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd value="/" />
<UKbd value="/"/>
</template>
</UInput>
<UButton
v-if="searchString.length > 0"
color="rose"
icon="i-heroicons-x-mark"
variant="outline"
color="rose"
@click="clearSearchString()"
v-if="searchString.length > 0"
/>
<UButton
@click="router.push(`/createDocument/edit`)"
@@ -33,27 +33,27 @@
<template #right>
<USelectMenu
<!-- <USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
class="hidden lg:block"
icon="i-heroicons-adjustments-horizontal-solid"
multiple
@change="tempStore.modifyColumns('createddocuments',selectedColumns)"
>
<template #label>
Spalten
</template>
</USelectMenu>
</USelectMenu>-->
<USelectMenu
v-if="selectableFilters.length > 0"
v-model="selectedFilters"
:color="selectedFilters.length > 0 ? 'primary' : 'white'"
:options="selectableFilters"
:ui-menu="{ width: 'min-w-max' }"
icon="i-heroicons-adjustments-horizontal-solid"
multiple
v-model="selectedFilters"
:options="selectableFilters"
:color="selectedFilters.length > 0 ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }"
>
<template #label>
Filter
@@ -63,36 +63,36 @@
</UDashboardToolbar>
<UTabs :items="selectedTypes" class="m-3">
<template #default="{item}">
{{item.label}}
{{ item.label }}
<UBadge
variant="outline"
class="ml-2"
variant="outline"
>
{{filteredRows.filter(i => item.key === 'invoices' ? ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type) : item.key === i.type).length}}
{{ filteredRows.filter(i => item.key === 'invoices' ? ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type) : item.key === i.type).length }}
</UBadge>
</template>
<template #item="{item}">
<div style="height: 80vh; overflow-y: scroll">
<UTable
:rows="filteredRows.filter(i => item.key === 'invoices' ? ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type) : item.key === i.type)"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="selectItem"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
:rows="filteredRows.filter(i => item.key === 'invoices' ? ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type) : item.key === i.type)"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
class="w-full"
@select="selectItem"
>
<template #type-data="{row}">
{{dataStore.documentTypesForCreation[row.type].labelSingle}}
<!--
<span v-if="row.type === 'cancellationInvoices'"> zu {{row.linkedDocument.documentNumber}}</span>
-->
{{ dataStore.documentTypesForCreation[row.type].labelSingle }}
<!--
<span v-if="row.type === 'cancellationInvoices'"> zu {{row.linkedDocument.documentNumber}}</span>
-->
</template>
<template #state-data="{row}">
<span
v-if="row.state === 'Entwurf'"
class="text-rose-500"
>
{{row.state}}
{{ row.state }}
</span>
<!-- <span
v-if="row.state === 'Gebucht'"
@@ -101,58 +101,59 @@
{{row.state}}
</span>-->
<span
v-if="row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
v-if="row.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
class="text-primary-500"
>
{{row.state}}
{{ row.state }}
</span>
<span
v-else-if="row.state === 'Gebucht' && items.find(i => i.linkedDocument && i.linkedDocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
v-else-if="row.state === 'Gebucht' && items.find(i => i.createddocument && i.createddocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
class="text-cyan-500"
>
Storniert mit {{items.find(i => i.linkedDocument && i.linkedDocument.id === row.id).documentNumber}}
Storniert mit {{ items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber }}
</span>
<span
v-else-if="row.state === 'Gebucht'"
class="text-primary-500"
>
{{row.state}}
{{ row.state }}
</span>
</template>
<template #partner-data="{row}">
<span v-if="row.customer && row.customer.name.length <21">{{row.customer ? row.customer.name : ""}}</span>
<span v-if="row.customer && row.customer.name.length <21">{{ row.customer ? row.customer.name : "" }}</span>
<UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name">
{{row.customer.name.substring(0,20)}}...
{{ row.customer.name.substring(0, 20) }}...
</UTooltip>
</template>
<template #reference-data="{row}">
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
<span v-else>{{row.documentNumber}}</span>
<span v-if="row === filteredRows[selectedItem]"
class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
<span v-else>{{ row.documentNumber }}</span>
</template>
<template #date-data="{row}">
<span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
<span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
<span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span>
<span
v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
</template>
<template #dueDate-data="{row}">
<!--
<span v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)" :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' ">{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
-->
<span
v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
:class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' ">{{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}</span>
</template>
<template #paid-data="{row}">
<!-- <div v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
<div
v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
<span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span>
<span v-else class="text-rose-600">Offen</span>
</div>-->
</div>
</template>
<template #amount-data="{row}">
<!--
<span v-if="row.type !== 'deliveryNotes'">{{displayCurrency(useSum().getCreatedDocumentSum(row,items))}}</span>
-->
<span
v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
</template>
<template #amountOpen-data="{row}">
<!--
<span v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">{{displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n,{amount}) => n + amount, 0))}}</span>
-->
<span
v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n, {amount}) => n + amount, 0)) }}</span>
</template>
</UTable>
</div>
@@ -181,14 +182,14 @@ defineShortcuts({
}
},
'arrowdown': () => {
if(selectedItem.value < filteredRows.value.length - 1) {
if (selectedItem.value < filteredRows.value.length - 1) {
selectedItem.value += 1
} else {
selectedItem.value = 0
}
},
'arrowup': () => {
if(selectedItem.value === 0) {
if (selectedItem.value === 0) {
selectedItem.value = filteredRows.value.length - 1
} else {
selectedItem.value -= 1
@@ -208,7 +209,7 @@ const selectedItem = ref(0)
const setupPage = async () => {
items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)","documentNumber",true, true))
items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)", "documentNumber", true, true))
}
setupPage()
@@ -315,7 +316,7 @@ const filteredRows = computed(() => {
}
})
if(selectedFilters.value.length > 0) {
if (selectedFilters.value.length > 0) {
selectedFilters.value.forEach(filterName => {
let filter = dataType.filters.find(i => i.name === filterName)
tempItems = tempItems.filter(filter.filterFunction)
@@ -323,7 +324,6 @@ const filteredRows = computed(() => {
}
tempItems = useSearch(searchString.value, tempItems)

42
pages/createDocument/serialInvoice.vue
View File

@@ -1,5 +1,3 @@
<template>
<UDashboardNavbar title="Serienrechnungen" :badge="filteredRows.length">
<template #right>
@@ -25,7 +23,7 @@
</UDashboardNavbar>
<UDashboardToolbar>
<template #right>
<USelectMenu
<!-- <USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
@@ -36,7 +34,7 @@
<template #label>
Spalten
</template>
</USelectMenu>
</USelectMenu>-->
<USelectMenu
v-model="selectedFilters"
icon="i-heroicons-adjustments-horizontal-solid"
@@ -65,26 +63,6 @@
<template #type-data="{row}">
{{dataStore.documentTypesForCreation[row.type].labelSingle}}
</template>
<template #state-data="{row}">
<span
v-if="row.state === 'Entwurf'"
class="text-rose-500"
>
{{row.state}}
</span>
<span
v-if="row.state === 'Gebucht'"
class="text-cyan-500"
>
{{row.state}}
</span>
<span
v-if="row.state === 'Abgeschlossen'"
class="text-primary-500"
>
{{row.state}}
</span>
</template>
<template #partner-data="{row}">
<span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
@@ -116,6 +94,10 @@
<template #contract-data="{row}">
<span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span>
</template>
<template #serialConfig.intervall-data="{row}">
<span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span>
<span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
</template>
</UTable>
</template>
@@ -161,13 +143,9 @@ const filteredRows = computed(() => {
const templateColumns = [
{
key: 'type',
label: "Typ"
key: 'serialConfig.active',
label: "Aktiv"
},{
key: 'state',
label: "Status"
},
{
key: "amount",
label: "Betrag"
},
@@ -180,8 +158,8 @@ const templateColumns = [
label: "Vertrag"
},
{
key: 'serialConfig.active',
label: "Aktiv"
key: 'serialConfig.intervall',
label: "Rhythmus"
}
]
const selectedColumns = ref(templateColumns)

19
pages/createDocument/show/[id].vue
View File

@@ -39,9 +39,9 @@ const openEmail = () => {
const openBankstatements = () => {
if(itemInfo.value.statementallocations.length > 1) {
navigateTo(`/banking/?filter=${JSON.stringify(itemInfo.value.statementallocations.map(i => i.bs_id))}`)
navigateTo(`/banking/?filter=${JSON.stringify(itemInfo.value.statementallocations.map(i => i.bankstatement))}`)
} else {
navigateTo(`/banking/statements/edit/${itemInfo.value.statementallocations[0].bs_id}`)
navigateTo(`/banking/statements/edit/${itemInfo.value.statementallocations[0].bankstatement}`)
}
}
</script>
@@ -105,12 +105,21 @@ const openBankstatements = () => {
Kunde
</UButton>
<UButton
v-if="itemInfo.linkedDocument"
@click="router.push(`/standardEntity/createDocument/show/${itemInfo.linkedDocument}`)"
v-if="itemInfo.createddocument"
@click="router.push(`/createDocument/show/${itemInfo.createddocument}`)"
icon="i-heroicons-link"
variant="outline"
>
{{dataStore.documentTypesForCreation[itemInfo.linkedDocument.type].labelSingle}} - {{itemInfo.linkedDocument.documentNumber}}
{{dataStore.documentTypesForCreation[itemInfo.createddocument.type].labelSingle}} - {{itemInfo.createddocument.documentNumber}}
</UButton>
<UButton
v-for="item in itemInfo.createddocuments"
v-if="itemInfo.createddocuments"
@click="router.push(`/createDocument/show/${item.id}`)"
icon="i-heroicons-link"
variant="outline"
>
{{dataStore.documentTypesForCreation[item.type].labelSingle}} - {{item.documentNumber}}
</UButton>
<UButton
v-if="itemInfo.statementallocations?.length > 0"

9
pages/email/new.vue
View File

@@ -48,6 +48,15 @@ const setupPage = async () => {
if(data) loadedDocuments.value = data
loadedDocuments.value = await Promise.all(loadedDocuments.value.map(async doc => {
const document = await useEntities("createddocuments").selectSingle(doc.createddocument)
console.log(document)
return {
...doc,
createddocument: document
}}))
//console.log(loadedDocuments.value)
if(loadedDocuments.value.length > 0) {

74
pages/files/index.vue
View File

@@ -364,33 +364,67 @@ const clearSearchString = () => {
variant="outline"
v-if="Object.keys(selectedFiles).find(i => selectedFiles[i] === true)"
>Herunterladen</UButton>
<UModal
v-model="createFolderModalOpen"
>
<UCard>
<UModal v-model="createFolderModalOpen">
<UCard :ui="{ body: { base: 'space-y-4' } }">
<template #header>
Ordner Erstellen
</template>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Ordner Erstellen
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="createFolderModalOpen = false" />
</div>
</template>
<UFormGroup label="Name des Ordners" required>
<UInput
v-model="createFolderData.name"
placeholder="z.B. Rechnungen 2024"
autofocus
/>
</UFormGroup>
<UFormGroup
label="Ordner erstellen"
<UFormGroup
label="Standard Dateityp"
>
<USelectMenu
v-model="createFolderData.standardFiletype"
:options="filetags"
option-attribute="name"
value-attribute="id"
searchable
searchable-placeholder="Typ suchen..."
placeholder="Kein Standard-Typ"
clear-search-on-close
>
<UInput
v-model="createFolderData.name"
<template #label>
<span v-if="createFolderData.standardFiletype">
{{ filetags.find(t => t.id === createFolderData.standardFiletype)?.name }}
</span>
<span v-else class="text-gray-400">Kein Typ ausgewählt</span>
</template>
</USelectMenu>
</UFormGroup>
<div v-if="createFolderData.standardFiletype">
<UCheckbox
v-model="createFolderData.standardFiletypeIsOptional"
name="isOptional"
label="Dateityp ist optional"
help="Wenn deaktiviert, MUSS der Nutzer beim Upload diesen Typ verwenden."
/>
</UFormGroup>
</div>
<template #footer>
<UButton
@click="createFolder"
>
Erstellen
</UButton>
<div class="flex justify-end gap-2">
<UButton color="gray" variant="ghost" @click="createFolderModalOpen = false">
Abbrechen
</UButton>
<UButton @click="createFolder" :disabled="!createFolderData.name">
Erstellen
</UButton>
</div>
</template>
</UCard>
</UModal>
</template>
@@ -429,8 +463,8 @@ const clearSearchString = () => {
</td>
<td>
<span v-if="entry.type === 'file'" class="text-xl">{{dayjs(documents.find(i => i.id === entry.id).created_at).format("DD.MM.YY HH:mm")}}</span>
<span v-if="entry.type === 'folder'" class="text-xl">{{dayjs(currentFolders.find(i => i.id === entry.id).created_at).format("DD.MM.YY HH:mm")}}</span>
<span v-if="entry.type === 'file'" class="text-xl">{{dayjs(documents.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
<span v-if="entry.type === 'folder'" class="text-xl">{{dayjs(currentFolders.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
</td>
</tr>
</table>

201
pages/staff/time/[id]/evaluate.vue
View File

@@ -4,10 +4,25 @@ const router = useRouter()
const route = useRoute()
const auth = useAuthStore()
const toast = useToast()
// 🔹 State
const workingtimes = ref([])
const absencerequests = ref([])
const workingTimeInfo = ref(null)
const workingTimeInfo = ref<{
userId: string;
spans: any[]; // Neue Struktur für die Detailansicht/Tabelle
summary: {
sumWorkingMinutesSubmitted: number;
sumWorkingMinutesApproved: number;
sumWorkingMinutesRecreationDays: number;
sumRecreationDays: number;
sumWorkingMinutesVacationDays: number;
sumVacationDays: number;
sumWorkingMinutesSickDays: number;
sumSickDays: number;
timeSpanWorkingMinutes: number;
saldoApproved: number;
saldoSubmitted: number;
} | null; // Neue Struktur für die Zusammenfassung
} | null>(null)
const platformIsNative = ref(useCapacitor().getIsNative())
@@ -20,12 +35,38 @@ const showDocument = ref(false)
const uri = ref("")
const itemInfo = ref({})
const profile = ref(null)
// 💡 Die ID des Benutzers, dessen Daten wir abrufen (aus der Route)
const evaluatedUserId = computed(() => route.params.id as string)
/**
* Konvertiert Minuten in das Format HH:MM h
*/
function formatMinutesToHHMM(minutes = 0) {
const h = Math.floor(minutes / 60)
const m = Math.floor(minutes % 60)
return `${h}:${String(m).padStart(2, "0")} h`
}
/**
* Berechnet die Dauer zwischen startedAt und endedAt in Minuten.
*/
function calculateDurationMinutes(start: string, end: string): number {
const startTime = $dayjs(start);
const endTime = $dayjs(end);
return endTime.diff(startTime, 'minute');
}
/**
* Formatiert die Dauer (in Minuten) in HH:MM h
*/
function formatSpanDuration(start: string, end: string): string {
const minutes = calculateDurationMinutes(start, end);
return formatMinutesToHHMM(minutes);
}
// 📅 Zeitraumumschaltung
function changeRange() {
const rangeMap = {
@@ -56,41 +97,67 @@ function changeRange() {
loadWorkingTimeInfo()
}
const profile = ref(null)
// 📊 Daten laden
// 📊 Daten laden (Initialisierung)
async function setupPage() {
await changeRange()
profile.value = (await useNuxtApp().$api("/api/tenant/profiles")).data.find(i => i.user_id === route.params.id)
// Lade das Profil des Benutzers, der ausgewertet wird (route.params.id)
try {
const response = await useNuxtApp().$api(`/api/tenant/profiles`);
// Findet das Profil des Benutzers, dessen ID in der Route steht
profile.value = response.data.find(i => i.user_id === evaluatedUserId.value);
} catch (error) {
console.error("Fehler beim Laden des Profils:", error);
}
console.log(profile.value)
setPageLayout(platformIsNative.value ? 'mobile' : 'default')
}
// 💡 ANGEPASST: Ruft den neuen Endpunkt ab und speichert das gesamte Payload-Objekt
async function loadWorkingTimeInfo() {
workingTimeInfo.value = await useFunctions().getWorkingTimesEvaluationData(
route.params.id,
selectedStartDay.value,
selectedEndDay.value
)
// Erstellt Query-Parameter für den neuen Backend-Endpunkt
const queryParams = new URLSearchParams({
from: selectedStartDay.value,
to: selectedEndDay.value,
targetUserId: evaluatedUserId.value,
});
const url = `/api/staff/time/evaluation?${queryParams.toString()}`;
// Führt den GET-Request zum neuen Endpunkt aus und speichert das gesamte Payload-Objekt { userId, spans, summary }
const data = await useNuxtApp().$api(url);
workingTimeInfo.value = data;
openTab.value = 0
}
// 📄 PDF generieren
// Frontend (index.vue)
async function generateDocument() {
const path = (await useEntities("letterheads").select("*"))[0].path // TODO SELECT
if (!workingTimeInfo.value || !workingTimeInfo.value.summary) return;
const path = (await useEntities("letterheads").select("*"))[0].path
uri.value = await useFunctions().useCreatePDF({
full_name: profile.value.full_name,
employee_number: profile.value.employee_number ? profile.value.employee_number : "-",
...workingTimeInfo.value}, path, "timesheet")
employee_number: profile.value.employee_number || "-",
// Wir übergeben das summary-Objekt flach (für Header-Daten)
...workingTimeInfo.value.summary,
// UND wir müssen die Spans explizit übergeben, damit die Tabelle generiert werden kann
spans: workingTimeInfo.value.spans
}, path, "timesheet")
showDocument.value = true
}
const fileSaved = ref(false)
// 💾 Datei speichern
async function saveFile() {
try {
let fileData = {
@@ -107,9 +174,6 @@ async function saveFile() {
} catch (error) {
toast.add({title:"Fehler beim Speichern der Auswertung", color: "rose"})
}
}
async function onTabChange(index: number) {
@@ -118,7 +182,6 @@ async function onTabChange(index: number) {
// Initialisierung
await setupPage()
changeRange()
</script>
<template>
@@ -206,22 +269,24 @@ changeRange()
>
<template #item="{ item }">
<div v-if="item.label === 'Information'">
<UCard v-if="workingTimeInfo" class="my-5">
<UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="my-5">
<template #header>
<h3 class="text-base font-semibold">Zusammenfassung</h3>
</template>
<div class="grid grid-cols-2 gap-3 text-sm">
<p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesEingereicht) }}</b></p>
<p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesApproved) }}</b></p>
<p>Feiertagsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesRecreationDays) }}</b> / {{ workingTimeInfo.sumRecreationDays }} Tage</p>
<p>Urlaubs-/Berufsschulausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesVacationDays) }}</b> / {{ workingTimeInfo.sumVacationDays }} Tage</p>
<p>Krankheitsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesSickDays) }}</b> / {{ workingTimeInfo.sumSickDays }} Tage</p>
<p>Soll-Stunden: <b>{{ formatMinutesToHHMM(workingTimeInfo.timeSpanWorkingMinutes) }}</b></p>
<p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSubmitted) }}</b></p>
<p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesApproved) }}</b></p>
<p>Feiertagsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesRecreationDays) }}</b> / {{ workingTimeInfo.summary.sumRecreationDays }} Tage</p>
<p>Urlaubs-/Berufsschulausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesVacationDays) }}</b> / {{ workingTimeInfo.summary.sumVacationDays }} Tage</p>
<p>Krankheitsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSickDays) }}</b> / {{ workingTimeInfo.summary.sumSickDays }} Tage</p>
<p>Soll-Stunden: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.timeSpanWorkingMinutes) }}</b></p>
<p class="col-span-2">
Inoffizielles Saldo: <b>{{ (workingTimeInfo.saldoInOfficial >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.saldoInOfficial)) }}</b>
Inoffizielles Saldo: <b>{{ (workingTimeInfo.summary.saldoSubmitted >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoSubmitted)) }}</b>
</p>
<p class="col-span-2">
Saldo: <b>{{ (workingTimeInfo.saldo >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.saldo)) }}</b>
Saldo: <b>{{ (workingTimeInfo.summary.saldoApproved >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoApproved)) }}</b>
</p>
</div>
</UCard>
@@ -229,33 +294,39 @@ changeRange()
<UDashboardPanel>
<UTable
v-if="workingTimeInfo"
:rows="workingTimeInfo.times"
:rows="workingTimeInfo.spans"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten' }"
:columns="[
{ key: 'state', label: 'Status' },
{ key: 'start', label: 'Start' },
{ key: 'end', label: 'Ende' },
{ key: 'status', label: 'Status' },
{ key: 'startedAt', label: 'Start' },
{ key: 'endedAt', label: 'Ende' },
{ key: 'duration', label: 'Dauer' },
{ key: 'description', label: 'Beschreibung' }
{ key: 'type', label: 'Typ' }
]"
@select="(row) => router.push(`/workingtimes/edit/${row.id}`)"
@select="(row) => router.push(`/workingtimes/edit/${row.sourceEventIds[0]}`)"
>
<template #state-data="{row}">
<span v-if="row.state === 'approved'" class="text-primary-500">Genehmigt</span>
<span v-else-if="row.state === 'submitted'" class="text-cyan-500">Eingereicht</span>
<span v-else-if="row.state === 'draft'" class="text-red-500">Entwurf</span>
<template #status-data="{row}">
<span v-if="row.status === 'approved'" class="text-primary-500">Genehmigt</span>
<span v-else-if="row.status === 'submitted'" class="text-cyan-500">Eingereicht</span>
<span v-else-if="row.status === 'factual'" class="text-gray-500">Faktisch</span>
<span v-else-if="row.status === 'draft'" class="text-red-500">Entwurf</span>
<span v-else>{{ row.status }}</span>
</template>
<template #start-data="{ row }">
{{ $dayjs(row.started_at).format('HH:mm DD.MM.YY') }} Uhr
<template #startedAt-data="{ row }">
{{ $dayjs(row.startedAt).format('HH:mm DD.MM.YY') }} Uhr
</template>
<template #end-data="{ row }">
{{ $dayjs(row.stopped_at).format('HH:mm DD.MM.YY') }} Uhr
<template #endedAt-data="{ row }">
{{ $dayjs(row.endedAt).format('HH:mm DD.MM.YY') }} Uhr
</template>
<template #duration-data="{ row }">
{{ useFormatDuration(row.duration_minutes) }}
{{ formatSpanDuration(row.startedAt, row.endedAt) }}
</template>
<template #type-data="{ row }">
{{ row.type.charAt(0).toUpperCase() + row.type.slice(1).replace('_', ' ') }}
</template>
</UTable>
</UDashboardPanel>
@@ -273,12 +344,8 @@ changeRange()
</UDashboardPanelContent>
</template>
<!-- ====================== -->
<!-- 📱 MOBILE ANSICHT -->
<!-- ====================== -->
<template v-else>
<!-- 🔙 Navigation -->
<UDashboardNavbar title="Auswertung">
<template #toggle><div></div></template>
<template #left>
@@ -290,9 +357,7 @@ changeRange()
</template>
</UDashboardNavbar>
<!-- 📌 Mobile Zeitraumwahl -->
<div class="p-4 space-y-4 border-b bg-white dark:bg-gray-900">
<!-- Predefined Ranges -->
<USelectMenu
v-model="selectedPresetRange"
:options="[
@@ -309,7 +374,6 @@ changeRange()
class="w-full"
/>
<!-- Start/End Datum -->
<div class="grid grid-cols-2 gap-3">
<div>
<p class="text-xs text-gray-500 mb-1">Start</p>
@@ -341,7 +405,6 @@ changeRange()
</div>
</div>
<!-- 📑 Mobile Tabs -->
<UTabs
:items="[{ label: 'Information' }, { label: 'Bericht' }]"
v-model="openTab"
@@ -350,58 +413,50 @@ changeRange()
>
<template #item="{ item }">
<!-- ====================== -->
<!-- TAB 1 — INFORMATION -->
<!-- ====================== -->
<div v-if="item.label === 'Information'" class="space-y-4">
<!-- Summary Card -->
<UCard v-if="workingTimeInfo" class="mt-3">
<UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="mt-3">
<template #header>
<h3 class="text-base font-semibold">Zusammenfassung</h3>
</template>
<div class="space-y-2 text-sm">
<p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesEingereicht) }}</b></p>
<p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesApproved) }}</b></p>
<p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSubmitted) }}</b></p>
<p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesApproved) }}</b></p>
<p>
Feiertagsausgleich:
<b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesRecreationDays) }}</b>
/ {{ workingTimeInfo.sumRecreationDays }} Tage
<b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesRecreationDays) }}</b>
/ {{ workingTimeInfo.summary.sumRecreationDays }} Tage
</p>
<p>
Urlaubs-/Berufsschule:
<b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesVacationDays) }}</b>
/ {{ workingTimeInfo.sumVacationDays }} Tage
<b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesVacationDays) }}</b>
/ {{ workingTimeInfo.summary.sumVacationDays }} Tage
</p>
<p>
Krankheitsausgleich:
<b>{{ formatMinutesToHHMM(workingTimeInfo.sumWorkingMinutesSickDays) }}</b>
/ {{ workingTimeInfo.sumSickDays }} Tage
<b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSickDays) }}</b>
/ {{ workingTimeInfo.summary.sumSickDays }} Tage
</p>
<p>Soll: <b>{{ formatMinutesToHHMM(workingTimeInfo.timeSpanWorkingMinutes) }}</b></p>
<p>Soll: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.timeSpanWorkingMinutes) }}</b></p>
<p>
Inoffizielles Saldo:
<b>{{ (workingTimeInfo.saldoInOfficial >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.saldoInOfficial)) }}</b>
<b>{{ (workingTimeInfo.summary.saldoSubmitted >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoSubmitted)) }}</b>
</p>
<p>
Saldo:
<b>{{ (workingTimeInfo.saldo >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.saldo)) }}</b>
<b>{{ (workingTimeInfo.summary.saldoApproved >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoApproved)) }}</b>
</p>
</div>
</UCard>
</div>
<!-- ====================== -->
<!-- TAB 2 — BERICHT -->
<!-- ====================== -->
<div v-else-if="item.label === 'Bericht'">
<UButton
v-if="uri && !fileSaved"
@@ -424,4 +479,4 @@ changeRange()
</template>
</template>
</template>

656
pages/staff/time/index.vue
View File

@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup>
import { useStaffTime } from '~/composables/useStaffTime'
import { useAuthStore } from '~/stores/auth'
import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";
@@ -7,25 +7,49 @@ definePageMeta({
layout: "default",
})
const { list, start, stop, submit, approve } = useStaffTime()
const { list, start, stop, submit, approve, reject } = useStaffTime()
const auth = useAuthStore()
const router = useRouter()
const toast = useToast()
const { $dayjs } = useNuxtApp()
// MOBILE DETECTION
const platformIsNative = useCapacitor().getIsNative()
// LIST + ACTIVE
const entries = ref([])
const active = computed(() => entries.value.find(e => !e.stopped_at && e.user_id === auth.user.id))
// STATE
const loading = ref(false)
const showModal = ref(false)
const editEntry = ref(null)
const view = ref('list') // 'list' | 'timeline'
// 👥 Nutzer-Filter (nur für Berechtigte)
// MODAL STATES
const showEditModal = ref(false)
const entryToEdit = ref(null)
const showRejectModal = ref(false)
const entryToReject = ref(null)
const rejectReason = ref("")
// FILTER & USER
const users = ref([])
const selectedUser = ref(platformIsNative ? auth.user.id : null)
const selectedUser = ref(auth.user.id)
const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
// DATA
const entries = ref([])
const active = computed(() => entries.value.find(e => !e.stopped_at))
const isViewingSelf = computed(() => selectedUser.value === auth.user.id)
// GROUPING
const groupedEntries = computed(() => {
const groups = {}
entries.value.forEach(entry => {
const dateKey = $dayjs(entry.started_at).format('YYYY-MM-DD')
if (!groups[dateKey]) groups[dateKey] = []
groups[dateKey].push(entry)
})
return groups
})
// CONFIG
const typeLabel = {
work: "Arbeitszeit",
vacation: "Urlaub",
@@ -42,24 +66,20 @@ const typeColor = {
other: "gray"
}
// ACTIONS
async function loadUsers() {
if (!canViewAll.value) return
// Beispiel: User aus Supabase holen
const res = (await useNuxtApp().$api("/api/tenant/profiles")).data
users.value = res
}
// LOAD ENTRIES (only own entries on mobile)
async function load() {
entries.value = await list(
canViewAll.value && selectedUser.value ? { user_id: selectedUser.value } : undefined
)
if (!selectedUser.value) return
entries.value = await list({ user_id: selectedUser.value })
}
async function handleStart() {
if (!isViewingSelf.value) return
loading.value = true
await start("Arbeitszeit gestartet")
await load()
@@ -74,366 +94,380 @@ async function handleStop() {
loading.value = false
}
function handleEdit(entry: any) {
editEntry.value = entry
showModal.value = true
function handleEdit(entry) {
entryToEdit.value = entry
showEditModal.value = true
}
async function handleSubmit(entry: any) {
await submit(entry.id)
async function handleSubmit(entry) {
loading.value = true
await submit(entry)
await load()
loading.value = false
toast.add({ title: 'Zeit eingereicht', color: 'green' })
}
async function handleApprove(entry: any) {
await approve(entry.id)
async function handleApprove(entry) {
loading.value = true
await approve(entry)
await load()
loading.value = false
toast.add({ title: 'Zeit genehmigt', color: 'green' })
}
function openRejectModal(entry) {
entryToReject.value = entry
rejectReason.value = ""
showRejectModal.value = true
}
async function confirmReject() {
if (!entryToReject.value) return
loading.value = true
try {
await reject(entryToReject.value, rejectReason.value || "Vom Administrator abgelehnt")
toast.add({ title: 'Zeit abgelehnt', color: 'green' })
showRejectModal.value = false
await load()
} catch (e) {
toast.add({ title: 'Fehler beim Ablehnen', description: e.message, color: 'red' })
} finally {
loading.value = false
entryToReject.value = null
}
}
watch(selectedUser, () => { load() })
onMounted(async () => {
await load()
await loadUsers()
await load()
setPageLayout(platformIsNative ? 'mobile' : 'default')
})
</script>
<template>
<!-- ============================= -->
<!-- DESKTOP VERSION -->
<!-- ============================= -->
<template v-if="!platformIsNative">
<UDashboardNavbar title="Zeiterfassung" :badge="entries.length" />
<UDashboardToolbar>
<template #left>
<div class="flex items-center gap-2">
<UIcon name="i-heroicons-clock" class="text-primary-500" />
<span v-if="active" class="text-primary-600 font-medium">
Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
</span>
<span v-else class="text-gray-500">Keine aktive Zeit</span>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 border-r pr-4 mr-2">
<UIcon name="i-heroicons-clock" class="w-5 h-5" :class="active ? 'text-primary-500 animate-pulse' : 'text-gray-400'" />
<div class="flex flex-col">
<span class="text-xs text-gray-500 uppercase font-bold">Status</span>
<span v-if="active" class="text-sm font-medium text-primary-600">
Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
</span>
<span v-else class="text-sm text-gray-600">Nicht aktiv</span>
</div>
</div>
<div v-if="canViewAll" class="flex items-center gap-2">
<USelectMenu
v-model="selectedUser"
:options="users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))"
placeholder="Benutzer auswählen"
value-attribute="value"
option-attribute="label"
class="min-w-[220px]"
:clearable="false"
/>
<UTooltip text="Anwesenheiten auswerten">
<UButton
:disabled="!selectedUser"
color="gray"
icon="i-heroicons-chart-bar"
variant="ghost"
@click="router.push(`/staff/time/${selectedUser}/evaluate`)"
/>
</UTooltip>
</div>
</div>
</template>
<template #right>
<UButton
v-if="active"
color="red"
icon="i-heroicons-stop"
:loading="loading"
label="Stoppen"
@click="handleStop"
/>
<UButton
v-else
color="green"
icon="i-heroicons-play"
:loading="loading"
label="Starten"
@click="handleStart"
/>
<UButton
color="primary"
icon="i-heroicons-plus"
label="Zeit"
@click="() => { editEntry = null; showModal = true }"
/>
</template>
</UDashboardToolbar>
<UDashboardToolbar>
<template #left>
<!-- 👥 User-Filter (nur bei Berechtigung) -->
<div v-if="canViewAll" class="flex items-center gap-2">
<USelectMenu
v-model="selectedUser"
:options="[
{ label: 'Alle Benutzer', value: null },
...users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))
]"
placeholder="Benutzer auswählen"
value-attribute="value"
option-attribute="label"
class="min-w-[220px]"
@change="load"
/>
<div class="flex gap-2 items-center">
<div class="flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 mr-2">
<UTooltip text="Listenansicht">
<UButton
size="xs"
:color="view === 'list' ? 'white' : 'gray'"
variant="ghost"
icon="i-heroicons-table-cells"
@click="view = 'list'"
/>
</UTooltip>
<UTooltip text="Zeitstrahl">
<UButton
size="xs"
:color="view === 'timeline' ? 'white' : 'gray'"
variant="ghost"
icon="i-heroicons-list-bullet"
@click="view = 'timeline'"
/>
</UTooltip>
</div>
<!-- 🔹 Button zur Auswertung -->
<UTooltip
:text="selectedUser ? 'Anwesenheiten des Mitarbeiters auswerten' : 'Mitarbeiter für die Auswertung auswählen'"
>
<UButton
:disabled="!selectedUser"
color="gray"
icon="i-heroicons-chart-bar"
label="Auswertung"
variant="soft"
@click="router.push(`/staff/time/${selectedUser}/evaluate`)"
/>
</UTooltip>
<template v-if="isViewingSelf">
<UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" label="Stoppen" @click="handleStop" />
<UButton v-else color="green" icon="i-heroicons-play" :loading="loading" label="Starten" @click="handleStart" />
</template>
<template v-else-if="active && canViewAll">
<UButton color="red" variant="soft" icon="i-heroicons-stop" :loading="loading" label="Mitarbeiter stoppen" @click="handleStop" />
</template>
<UButton color="gray" variant="solid" icon="i-heroicons-plus" label="Erfassen" @click="() => { entryToEdit = null; showEditModal = true }" />
</div>
</template>
</UDashboardToolbar>
<UDashboardPanelContent class="p-0 sm:p-4">
<UDashboardPanelContent>
<UTable
:rows="entries"
:columns="[
{ key: 'actions', label: '' },
{ key: 'state', label: 'Status' },
{ key: 'started_at', label: 'Start' },
{ key: 'stopped_at', label: 'Ende' },
{ key: 'duration_minutes', label: 'Dauer' },
{ key: 'user', label: 'Mitarbeiter' },
{ key: 'type', label: 'Typ' },
{ key: 'description', label: 'Beschreibung' },
]"
>
<template #state-data="{ row }">
<span v-if="row.state === 'approved'" class="text-primary-500">Genehmigt</span>
<span v-else-if="row.state === 'submitted'" class="text-cyan-500">Eingereicht</span>
<span v-else-if="row.state === 'draft'" class="text-red-500">Entwurf</span>
</template>
<template #type-data="{ row }">
<UBadge :color="typeColor[row.type] || 'gray'">
{{ typeLabel[row.type] || row.type }}
</UBadge>
</template>
<!-- START -->
<template #started_at-data="{ row }">
<!-- Urlaub / Krankheit → nur Tag -->
<span v-if="row.type === 'vacation' || row.type === 'sick'">
{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}
</span>
<!-- Arbeitszeit / andere → Datum + Uhrzeit -->
<span v-else>
{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}
</span>
</template>
<!-- ENDE -->
<template #stopped_at-data="{ row }">
<span v-if="!row.stopped_at" class="text-primary-500 font-medium">
läuft...
</span>
<!-- Urlaub / Krankheit → nur Tag -->
<span v-else-if="row.type === 'vacation' || row.type === 'sick'">
{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}
</span>
<!-- Arbeitszeit / andere → Datum + Uhrzeit -->
<span v-else>
{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}
</span>
</template>
<template #duration_minutes-data="{ row }">
<!-- Urlaub / Krankheit → Tage anzeigen -->
<span v-if="row.type === 'vacation' || row.type === 'sick'">
<!-- {{ useFormatDurationDays(row.startet_at, row.stopped_at) }}-->--
</span>
<!-- Arbeitszeit / andere → Minutenformat -->
<span v-else>
<UCard v-if="view === 'list'" :ui="{ body: { padding: 'p-0 sm:p-0' } }">
<UTable
:rows="entries"
:columns="[
{ key: 'actions', label: 'Aktionen', class: 'w-32' },
{ key: 'state', label: 'Status' },
{ key: 'started_at', label: 'Start' },
{ key: 'stopped_at', label: 'Ende' },
{ key: 'duration_minutes', label: 'Dauer' },
{ key: 'type', label: 'Typ' },
{ key: 'description', label: 'Beschreibung' },
]"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
>
<template #state-data="{ row }">
<UBadge v-if="row.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge>
<UBadge v-else-if="row.state === 'submitted'" color="cyan" variant="subtle">Eingereicht</UBadge>
<UBadge v-else-if="row.state === 'rejected'" color="red" variant="subtle">Abgelehnt</UBadge>
<UBadge v-else color="gray" variant="subtle">Entwurf</UBadge>
</template>
<template #type-data="{ row }">
<UBadge :color="typeColor[row.type] || 'gray'" variant="soft">{{ typeLabel[row.type] || row.type }}</UBadge>
</template>
<template #started_at-data="{ row }">
<span v-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}</span>
<span v-else>{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}</span>
</template>
<template #stopped_at-data="{ row }">
<span v-if="!row.stopped_at" class="text-primary-500 font-medium animate-pulse">läuft...</span>
<span v-else-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}</span>
<span v-else>{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}</span>
</template>
<template #duration_minutes-data="{ row }">
{{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
</span>
</template>
<template #actions-data="{ row }">
<div class="flex items-center gap-1">
<UTooltip text="Einreichen" v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at">
<UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row)" :loading="loading" />
</UTooltip>
<UTooltip text="Genehmigen" v-if="row.state === 'submitted' && canViewAll">
<UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row)" :loading="loading" />
</UTooltip>
<UTooltip text="Ablehnen" v-if="(row.state === 'submitted' || row.state === 'approved') && canViewAll">
<UButton size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row)" :loading="loading" />
</UTooltip>
<UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.state)">
<UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row)" />
</UTooltip>
</div>
</template>
<template #description-data="{ row }">
<span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
<span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
<span v-else>{{row.description}}</span>
</template>
</UTable>
</UCard>
</template>
<div v-else class="max-w-5xl mx-auto pb-20">
<template #actions-data="{ row }">
<UTooltip text="Zeit genehmigen" v-if="row.state === 'submitted'">
<UButton
variant="ghost"
icon="i-heroicons-check-circle"
@click="handleApprove(row)"
/>
</UTooltip>
<UTooltip text="Zeit einreichen" v-if="row.state === 'draft'">
<UButton
variant="ghost"
icon="i-heroicons-arrow-right-end-on-rectangle"
@click="handleSubmit(row)"
/>
</UTooltip>
<UTooltip text="Zeit bearbeiten" v-if="row.state === 'draft'">
<UButton
variant="ghost"
icon="i-heroicons-pencil-square"
@click="handleEdit(row)"
/>
</UTooltip>
</template>
<template #user-data="{ row }">
{{users.find(i => i.user_id === row.user_id) ? users.find(i => i.user_id === row.user_id).full_name : ""}}
</template>
<template #description-data="{ row }">
<span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
<span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
<span v-else>{{row.description}}</span>
</template>
</UTable>
<div v-for="(group, date) in groupedEntries" :key="date" class="relative group/date">
<div class="sticky top-0 z-10 bg-white dark:bg-gray-900 py-4 mb-4 border-b border-gray-200 dark:border-gray-800 flex items-center gap-3">
<div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 capitalize">
{{ useNuxtApp().$dayjs(date).format('dddd, DD. MMMM') }}
</h3>
<span class="text-xs text-gray-500 font-normal mt-0.5">
{{ group.length }} Einträge
</span>
</div>
<div class="absolute left-[5px] top-14 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-last/date:bottom-auto group-last/date:h-full"></div>
<div class="space-y-6 pb-8">
<div v-for="entry in group" :key="entry.id" class="relative pl-8">
<div
class="absolute left-0 top-6 w-3 h-3 rounded-full border-2 border-white dark:border-gray-900 shadow-sm z-0"
:class="{
'bg-green-500 ring-4 ring-green-100 dark:ring-green-900/30': !entry.stopped_at,
'bg-gray-400': entry.stopped_at && entry.type === 'work',
'bg-yellow-400': entry.type === 'vacation',
'bg-red-400': entry.type === 'sick'
}"
></div>
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
<div class="flex flex-wrap justify-between items-center p-4 border-b border-gray-100 dark:border-gray-700 bg-gray-50/30 dark:bg-gray-800">
<div class="flex items-center gap-3">
<div class="font-mono text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
{{ useNuxtApp().$dayjs(entry.started_at).format('HH:mm') }}
<span class="text-gray-400 text-sm">bis</span>
<span v-if="entry.stopped_at">{{ useNuxtApp().$dayjs(entry.stopped_at).format('HH:mm') }}</span>
<span v-else class="text-primary-500 animate-pulse text-sm uppercase font-bold tracking-wider">Läuft</span>
</div>
<UBadge :color="typeColor[entry.type]" variant="soft" size="xs">{{ typeLabel[entry.type] }}</UBadge>
</div>
<div class="flex items-center gap-2">
<span v-if="entry.duration_minutes" class="text-sm font-medium text-gray-600 dark:text-gray-300">
{{ useFormatDuration(entry.duration_minutes) }}
</span>
<UBadge v-if="entry.state === 'approved'" color="green" size="xs" variant="solid">Genehmigt</UBadge>
<UBadge v-else-if="entry.state === 'submitted'" color="cyan" size="xs" variant="solid">Eingereicht</UBadge>
<UBadge v-else-if="entry.state === 'rejected'" color="red" size="xs" variant="solid">Abgelehnt</UBadge>
<UBadge v-else color="gray" size="xs" variant="subtle">Entwurf</UBadge>
</div>
</div>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-300 text-sm whitespace-pre-wrap">
{{ entry.description || 'Keine Beschreibung angegeben.' }}
</p>
<p v-if="entry.type === 'vacation'" class="text-sm text-gray-500 italic mt-1">
Grund: {{ entry.vacation_reason }}
</p>
</div>
<div class="bg-gray-50 dark:bg-gray-900/30 px-4 py-2 flex justify-end gap-2 border-t border-gray-100 dark:border-gray-700">
<UButton
v-if="(entry.state === 'draft' || entry.state === 'factual') && entry.stopped_at"
size="xs" color="cyan" variant="solid" icon="i-heroicons-paper-airplane" label="Einreichen"
@click="handleSubmit(entry)" :loading="loading"
/>
<UButton
v-if="entry.state === 'submitted' && canViewAll"
size="xs" color="green" variant="solid" icon="i-heroicons-check" label="Genehmigen"
@click="handleApprove(entry)" :loading="loading"
/>
<UButton
v-if="(entry.state === 'submitted' || entry.state === 'approved') && canViewAll"
size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" label="Ablehnen"
@click="openRejectModal(entry)" :loading="loading"
/>
<UButton
v-if="['draft', 'factual', 'submitted'].includes(entry.state)"
size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" label="Bearbeiten"
@click="handleEdit(entry)"
/>
</div>
</div>
</div>
</div>
</div>
<div v-if="entries.length === 0" class="flex flex-col items-center justify-center py-20 text-gray-400">
<UIcon name="i-heroicons-calendar" class="w-12 h-12 mb-2 opacity-50" />
<p>Keine Einträge im gewählten Zeitraum.</p>
</div>
</div>
</UDashboardPanelContent>
</template>
<!-- ============================= -->
<!-- MOBILE VERSION -->
<!-- ============================= -->
<template v-else>
<UDashboardNavbar title="Zeiterfassung" />
<div class="relative flex flex-col h-[100dvh] overflow-hidden">
<!-- 🔥 FIXED ACTIVE TIMER -->
<div class="p-4 bg-white dark:bg-gray-900 border-b sticky top-0 z-20 shadow-sm">
<div v-if="isViewingSelf" class="p-4 bg-white dark:bg-gray-900 border-b sticky top-0 z-20 shadow-sm">
<UCard class="p-3">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">Aktive Zeit</p>
<p v-if="active" class="text-primary-600 font-semibold">
<p v-if="active" class="text-primary-600 font-semibold animate-pulse">
Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
</p>
<p v-else class="text-gray-600">Keine aktive Zeit</p>
</div>
<UButton
v-if="active"
color="red"
icon="i-heroicons-stop"
:loading="loading"
@click="handleStop"
/>
<UButton
v-else
color="green"
icon="i-heroicons-play"
:loading="loading"
@click="handleStart"
/>
<div class="flex gap-2">
<template v-if="isViewingSelf">
<UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" @click="handleStop" />
<UButton v-else color="green" icon="i-heroicons-play" :loading="loading" @click="handleStart" />
</template>
</div>
</div>
</UCard>
</div>
<div class="px-3 mt-3">
<UButton
color="gray"
icon="i-heroicons-chart-bar"
label="Eigene Auswertung"
class="w-full"
variant="soft"
@click="router.push(`/staff/time/${auth.user.id}/evaluate`)"
/>
<UButton color="gray" icon="i-heroicons-chart-bar" label="Auswertung" class="w-full" variant="soft" @click="router.push(`/staff/time/${selectedUser}/evaluate`)" />
</div>
<!-- 📜 SCROLLABLE CONTENT -->
<UDashboardPanelContent class="flex-1 overflow-y-auto p-3 space-y-4 pb-24">
<!-- ZEIT-CARDS -->
<UCard
v-for="row in entries"
:key="row.id"
class="p-4 border rounded-xl active:scale-[0.98] transition cursor-pointer"
@click="handleEdit(row)"
>
<UCard v-for="row in entries" :key="row.id" class="p-4 border rounded-xl" @click="handleEdit(row)">
<div class="flex justify-between items-center">
<div class="font-semibold flex items-center gap-2">
<span>{{ row.description || 'Keine Beschreibung' }}</span>
<UBadge
:color="typeColor[row.type]"
class="text-xs"
>
{{ typeLabel[row.type] }}
</UBadge>
<span class="truncate max-w-[150px]">{{ row.description || 'Keine Beschreibung' }}</span>
<UBadge :color="typeColor[row.type]" class="text-xs">{{ typeLabel[row.type] }}</UBadge>
</div>
<UBadge
:color="{
approved: 'primary',
submitted: 'cyan',
draft: 'red'
}[row.state]"
>
{{
{
approved: 'Genehmigt',
submitted: 'Eingereicht',
draft: 'Entwurf'
}[row.state] || row.state
}}
</UBadge>
<UBadge v-if="row.state === 'approved'" color="green">Genehmigt</UBadge>
<UBadge v-else-if="row.state === 'submitted'" color="cyan">Eingereicht</UBadge>
<UBadge v-else-if="row.state === 'rejected'" color="red">Abgelehnt</UBadge>
<UBadge v-else color="gray">Entwurf</UBadge>
</div>
<p class="text-sm text-gray-500 mt-1">
Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}
</p>
<p class="text-sm text-gray-500">
Ende:
<span v-if="row.stopped_at">
{{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}
</span>
<span v-else class="text-primary-500 font-medium">läuft...</span>
</p>
<p class="text-sm text-gray-500">
Dauer:
{{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : '-' }}
</p>
<!-- ACTION-BUTTONS -->
<div class="flex gap-2 mt-3">
<UButton
v-if="row.state === 'draft'"
color="gray"
icon="i-heroicons-arrow-right-end-on-rectangle"
label="Einreichen"
variant="soft"
@click.stop="handleSubmit(row)"
/>
<!-- <UButton
v-if="row.state === 'submitted'"
color="primary"
icon="i-heroicons-check"
label="Genehmigen"
variant="soft"
@click.stop="handleApprove(row)"
/>-->
<p class="text-sm text-gray-500 mt-1">Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}</p>
<p class="text-sm text-gray-500">Ende: <span v-if="row.stopped_at">{{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}</span></p>
<div class="flex gap-2 mt-3 justify-end">
<UButton v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at" color="cyan" size="sm" icon="i-heroicons-paper-airplane" label="Einreichen" variant="soft" @click.stop="handleSubmit(row)" :loading="loading" />
<UButton v-if="row.state === 'submitted' && canViewAll" color="green" size="sm" icon="i-heroicons-check" label="Genehmigen" variant="soft" @click.stop="handleApprove(row)" :loading="loading" />
</div>
</UCard>
</UDashboardPanelContent>
<!-- ➕ FLOATING ACTION BUTTON -->
<FloatingActionButton
icon="i-heroicons-plus"
class="!fixed bottom-6 right-6 z-50"
color="primary"
@click="() => { editEntry = null; showModal = true }"
/>
<FloatingActionButton icon="i-heroicons-plus" class="!fixed bottom-6 right-6 z-50" color="primary" @click="() => { entryToEdit = null; showEditModal = true }" />
</div>
</template>
<!-- MODAL -->
<StaffTimeEntryModal
v-model="showModal"
:entry="editEntry"
v-model="showEditModal"
:entry="entryToEdit"
@saved="load"
:users="users"
:can-select-user="canViewAll"
:default-user-id="selectedUser"
/>
</template>
<UModal v-model="showRejectModal">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Zeiteintrag ablehnen
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showRejectModal = false" />
</div>
</template>
<div class="space-y-4">
<p class="text-sm text-gray-500">
Der Eintrag wird als "Rejected" markiert und nicht mehr zur Arbeitszeit gezählt.
</p>
<UFormGroup label="Grund (optional)" name="reason">
<UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus />
</UFormGroup>
</div>
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="gray" variant="soft" @click="showRejectModal = false">Abbrechen</UButton>
<UButton color="red" :loading="loading" @click="confirmReject">Bestätigen</UButton>
</div>
</template>
</UCard>
</UModal>
</template>

2
pages/standardEntity/[type]/[mode]/[[id]].vue
View File

@@ -33,7 +33,7 @@ const setupPage = async (sort_column = null, sort_direction = null) => {
item.value = await useEntities(type).selectSingle(route.params.id, "*", true)
} else if (mode.value === "edit") {
//Load Data for Edit
item.value = JSON.stringify(await useEntities(type).selectSingle(route.params.id))
item.value = JSON.stringify(await useEntities(type).selectSingle(route.params.id,"*",false))
console.log(item.value)

26
stores/data.js
View File

@@ -956,10 +956,10 @@ export const useDataStore = defineStore('data', () => {
inputType: "number",
inputTrailing: "EUR",
inputChangeFunction: function (row) {
if(row.markupPercentage) {
row.sellingPrice = (row.purchasePrice * (1+row.markupPercentage/100)).toFixed(4)
if(row.markup_percentage) {
row.seling_price = (row.purchase_price * (1+row.markup_percentage/100)).toFixed(4)
} else {
row.sellingPrice = row.purchasePrice.toFixed(4)
row.seling_price = row.purchase_price.toFixed(4)
}
}
},{
@@ -968,12 +968,12 @@ export const useDataStore = defineStore('data', () => {
inputType: "number",
inputTrailing: "%",
inputChangeFunction: function (row) {
if(row.purchasePrice && ! row.sellingPrice) {
row.sellingPrice = (row.purchasePrice * (1+row.markupPercentage/100)).toFixed(4)
} else if(row.sellingPrice && !row.purchasePrice) {
row.purchasePrice = (row.sellingPrice / (1+row.markupPercentage/100)).toFixed(4)
if(row.purchase_price && ! row.seling_price) {
row.seling_price = (row.purchase_price * (1+row.markup_percentage/100)).toFixed(4)
} else if(row.seling_price && !row.purchase_price) {
row.purchase_price = (row.seling_price / (1+row.markup_percentage/100)).toFixed(4)
} else {
row.sellingPrice = (row.purchasePrice * (1+row.markupPercentage/100)).toFixed(4)
row.seling_price = (row.purchase_price * (1+row.markup_percentage/100)).toFixed(4)
}
}
},{
@@ -984,10 +984,10 @@ export const useDataStore = defineStore('data', () => {
inputType: "number",
inputTrailing: "EUR",
inputChangeFunction: function (row) {
if(row.purchasePrice ) {
row.markupPercentage = ((row.sellingPrice / row.purchasePrice - 1) * 100 ).toFixed(2)
if(row.purchase_price ) {
row.markup_percentage = ((row.selling_price / row.purchase_price - 1) * 100 ).toFixed(2)
} else{
row.purchasePrice = (row.sellingPrice / (1+row.markupPercentage/100)).toFixed(4)
row.purchase_price = (row.selling_price / (1+row.markup_percentage/100)).toFixed(4)
}
}
},{
@@ -1766,7 +1766,7 @@ export const useDataStore = defineStore('data', () => {
sortable: true
},
{
key: "purchasePrice",
key: "purchase_price",
label: "Kaufpreis",
inputType: "number",
inputStepSize: "0.01",
@@ -2108,7 +2108,7 @@ export const useDataStore = defineStore('data', () => {
sortable: true
},
{
key: "purchasePrice",
key: "purchase_price",
label: "Einkauspreis",
inputType: "number",
component: purchasePrice,