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

Fixed Times

Browse Source
This commit is contained in:
florianfederspiel
2025-12-14 17:15:24 +01:00
parent 9ddda1a933
commit 780b899d42
4 changed files with 386 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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) => {

203
composables/useStaffTime.ts
View File

@@ -1,77 +1,160 @@
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()
/**
* Lädt die Zeitspannen (Spans) für die Liste.
* Nutzt jetzt GET /api/staff/time/spans
*/
const list = async (filter?: { user_id?: string, from?: string, to?: string }) => {
// Standard: Aktueller Monat
const from = filter?.from || $dayjs().startOf('month').format('YYYY-MM-DD')
const to = filter?.to || $dayjs().endOf('month').format('YYYY-MM-DD')
// Ziel-User: Entweder aus Filter (Admin-Ansicht) oder eigener User
const targetUserId = filter?.user_id || auth.user.id
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' })
}
async function start(description?: string) {
return await $api<StaffTimeEntry>('/api/staff/time', {
method: 'POST',
body: {
started_at: new Date().toISOString(),
type: 'work',
description,
},
const params = new URLSearchParams({
from,
to,
// Der Endpoint erwartet targetUserId, wenn man Daten eines anderen Users will
targetUserId
})
try {
// 💡 UPDATE: Prefix /api hinzugefügt
const spans = await $api(`/api/staff/time/spans?${params.toString()}`)
return (spans || []).map((span: any) => {
const start = $dayjs(span.startedAt)
// Wenn endedAt null ist, läuft die Zeit noch -> Dauer bis "jetzt" berechnen für Anzeige
const end = span.endedAt ? $dayjs(span.endedAt) : $dayjs()
const duration = end.diff(start, 'minute')
return {
// ID: Wir nehmen die erste Event-ID (Start-Event) als Referenz für Aktionen
id: span.sourceEventIds && span.sourceEventIds.length > 0 ? span.sourceEventIds[0] : null,
// Mapping Backend-Status -> Frontend-State
state: span.status,
// Zeitstempel
started_at: span.startedAt,
stopped_at: span.endedAt,
duration_minutes: duration,
// Da der Endpoint nur die Spans zurückgibt, setzen wir die UserID
// auf den User, den wir angefragt haben.
user_id: targetUserId,
type: span.type,
// Payload/Description falls vorhanden
description: span.payload?.description || ''
}
}).sort((a: any, b: any) => $dayjs(b.started_at).valueOf() - $dayjs(a.started_at).valueOf()) // Sortierung: Neueste oben
} catch (error) {
console.error("Fehler beim Laden der Zeiten:", error)
return []
}
}
async function stop(id: string) {
return await $api<StaffTimeEntry>(`/api/staff/time/${id}/stop`, {
method: 'PUT',
body: { stopped_at: new Date().toISOString() },
})
/**
* Startet einen neuen Zeiteintrag.
* POST /api/staff/time/event
*/
const start = async (description = "Arbeitszeit") => {
try {
// 💡 UPDATE: Prefix /api hinzugefügt
await $api('/api/staff/time/event', {
method: 'POST',
body: {
eventtype: 'work_start',
eventtime: new Date().toISOString(),
payload: { description }
}
})
} catch (error) {
console.error("Fehler beim Starten:", error)
throw error
}
}
async function submit(id: string) {
return await $api<StaffTimeEntry>(`/api/staff/time/${id}`, {
method: 'PUT',
body: { state: 'submitted' },
})
/**
* Stoppt die aktuelle Zeit.
* POST /api/staff/time/event
*/
const stop = async (entryId?: string) => {
try {
// 💡 UPDATE: Prefix /api hinzugefügt
await $api('/api/staff/time/event', {
method: 'POST',
body: {
eventtype: 'work_end',
eventtime: new Date().toISOString()
}
})
} catch (error) {
console.error("Fehler beim Stoppen:", error)
throw error
}
}
async function approve(id: string) {
const auth = useAuthStore()
const now = useNuxtApp().$dayjs().toISOString()
return await $api(`/api/staff/time/${id}`, {
method: 'PUT',
body: {
state: 'approved',
//@ts-ignore
approved_by: auth.user.id,
approved_at: now,
},
})
/**
* Reicht einen Eintrag ein.
* POST /api/staff/time/submit
*/
const submit = async (entryId: string) => {
if (!entryId) return
try {
// 💡 UPDATE: Prefix /api hinzugefügt
await $api('/api/staff/time/submit', {
method: 'POST',
body: {
eventIds: [entryId]
}
})
} catch (error) {
console.error("Fehler beim Einreichen:", error)
throw error
}
}
async function get(id: string) {
return await $api<StaffTimeEntry>(`/api/staff/time/${id}`, { method: 'GET' })
/**
* Genehmigt einen Eintrag.
* POST /api/staff/time/approve
*/
const approve = async (entry: any) => {
if (!entry || !entry.id || !entry.user_id) {
console.error("Ungültiger Eintrag für Genehmigung (ID oder UserID fehlt)", entry)
return
}
try {
// 💡 UPDATE: Prefix /api hinzugefügt
await $api('/api/staff/time/approve', {
method: 'POST',
body: {
eventIds: [entry.id],
employeeUserId: entry.user_id
}
})
} catch (error) {
console.error("Fehler beim Genehmigen:", error)
throw error
}
}
async function create(data: Record<string, any>) {
return await $api('/api/staff/time', { method: 'POST', body: data })
return {
list,
start,
stop,
submit,
approve
}
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 }
}
}

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>

220
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";
@@ -12,20 +12,30 @@ const auth = useAuthStore()
const router = useRouter()
// 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)
// 👥 Nutzer-Filter (nur für Berechtigte)
// 👥 Nutzer-Filter
const users = ref([])
const selectedUser = ref(platformIsNative ? auth.user.id : null)
// WICHTIG: Standardmäßig IMMER den aktuellen User wählen (kein null mehr)
const selectedUser = ref(auth.user.id)
const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
// LIST + ACTIVE
const entries = ref([])
// Active berechnet sich jetzt aus den geladenen Einträgen.
// Da wir immer nur EINEN User laden, ist ein laufender Eintrag hier
// automatisch der aktive Eintrag des angezeigten Users.
const active = computed(() => entries.value.find(e => !e.stopped_at))
// Prüft, ob wir gerade das eigene Profil ansehen (für Start/Stop Buttons)
const isViewingSelf = computed(() => selectedUser.value === auth.user.id)
const typeLabel = {
work: "Arbeitszeit",
vacation: "Urlaub",
@@ -45,21 +55,23 @@ const typeColor = {
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)
// LOAD ENTRIES (Erzwingt jetzt immer eine User-ID)
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 // 👈 Hier wird der Filter erzwungen
})
}
async function handleStart() {
// Sicherheitshalber: Starten nur erlauben, wenn man sich selbst ansieht
if (!isViewingSelf.value) return
loading.value = true
await start("Arbeitszeit gestartet")
await load()
@@ -68,73 +80,93 @@ async function handleStart() {
async function handleStop() {
if (!active.value) return
// Stoppen darf man ggf. auch andere (als Admin), daher hier kein isViewingSelf Check
// oder je nach Logik anpassen. Hier erlauben wir das Stoppen des angezeigten Timers.
loading.value = true
await stop(active.value.id)
await load()
loading.value = false
}
function handleEdit(entry: any) {
function handleEdit(entry) {
editEntry.value = entry
showModal.value = true
}
async function handleSubmit(entry: any) {
await submit(entry.id)
async function handleSubmit(entry) {
await submit(entry)
await load()
}
async function handleApprove(entry: any) {
await approve(entry.id)
async function handleApprove(entry) {
await approve(entry)
await load()
}
onMounted(async () => {
await load()
await loadUsers()
setPageLayout(platformIsNative ? 'mobile' : 'default')
// Watcher: Wenn der User im Dropdown gewechselt wird, neu laden
watch(selectedUser, () => {
load()
})
onMounted(async () => {
await loadUsers()
await load() // Lädt initial den eingeloggten User
setPageLayout(platformIsNative ? 'mobile' : 'default')
})
</script>
<template>
<!-- ============================= -->
<!-- DESKTOP VERSION -->
<!-- ============================= -->
<template v-if="!platformIsNative">
<UDashboardNavbar title="Zeiterfassung" :badge="entries.length" />
<UDashboardToolbar>
<!--<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 v-if="isViewingSelf">Läuft seit</span>
<span v-else>Mitarbeiter aktiv seit</span>
{{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
</span>
<span v-else class="text-gray-500">
<span v-if="isViewingSelf">Keine aktive Zeit</span>
<span v-else>Mitarbeiter nicht aktiv</span>
</span>
<span v-else class="text-gray-500">Keine aktive Zeit</span>
</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"
/>
<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="primary"
icon="i-heroicons-plus"
@@ -142,28 +174,22 @@ onMounted(async () => {
@click="() => { editEntry = null; showModal = true }"
/>
</template>
</UDashboardToolbar>
</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 }))
]"
: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]"
@change="load"
:clearable="false"
/>
<!-- 🔹 Button zur Auswertung -->
<UTooltip
:text="selectedUser ? 'Anwesenheiten des Mitarbeiters auswerten' : 'Mitarbeiter für die Auswertung auswählen'"
>
<UTooltip text="Anwesenheiten auswerten">
<UButton
:disabled="!selectedUser"
color="gray"
@@ -188,10 +214,11 @@ onMounted(async () => {
{ key: 'started_at', label: 'Start' },
{ key: 'stopped_at', label: 'Ende' },
{ key: 'duration_minutes', label: 'Dauer' },
{ key: 'user', label: 'Mitarbeiter' },
// { key: 'user', label: 'Mitarbeiter' }, // Spalte entfernt, da wir eh nur einen User sehen
{ 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 }">
<span v-if="row.state === 'approved'" class="text-primary-500">Genehmigt</span>
@@ -204,53 +231,37 @@ onMounted(async () => {
</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>
<span v-else>
{{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
</span>
</template>
<template #actions-data="{ row }">
<UTooltip text="Zeit genehmigen" v-if="row.state === 'submitted'">
<UTooltip text="Zeit genehmigen" v-if="row.state === 'submitted' && canViewAll">
<UButton
variant="ghost"
icon="i-heroicons-check-circle"
@@ -272,9 +283,7 @@ onMounted(async () => {
/>
</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>
@@ -284,22 +293,16 @@ onMounted(async () => {
</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">
Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
</p>
@@ -328,17 +331,15 @@ onMounted(async () => {
<UButton
color="gray"
icon="i-heroicons-chart-bar"
label="Eigene Auswertung"
label="Auswertung"
class="w-full"
variant="soft"
@click="router.push(`/staff/time/${auth.user.id}/evaluate`)"
@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"
@@ -349,30 +350,16 @@ onMounted(async () => {
<div class="font-semibold flex items-center gap-2">
<span>{{ row.description || 'Keine Beschreibung' }}</span>
<UBadge
:color="typeColor[row.type]"
class="text-xs"
>
<UBadge :color="typeColor[row.type]" class="text-xs">
{{ typeLabel[row.type] }}
</UBadge>
</div>
<UBadge
:color="{
approved: 'primary',
submitted: 'cyan',
draft: 'red'
}[row.state]"
:color="{ approved: 'primary', submitted: 'cyan', draft: 'red' }[row.state]"
>
{{
{
approved: 'Genehmigt',
submitted: 'Eingereicht',
draft: 'Entwurf'
}[row.state] || row.state
}}
{{ { approved: 'Genehmigt', submitted: 'Eingereicht', draft: 'Entwurf' }[row.state] || row.state }}
</UBadge>
</div>
<p class="text-sm text-gray-500 mt-1">
@@ -382,8 +369,8 @@ onMounted(async () => {
<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>
{{ 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>
@@ -392,7 +379,6 @@ onMounted(async () => {
{{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : '-' }}
</p>
<!-- ACTION-BUTTONS -->
<div class="flex gap-2 mt-3">
<UButton
v-if="row.state === 'draft'"
@@ -402,21 +388,18 @@ onMounted(async () => {
variant="soft"
@click.stop="handleSubmit(row)"
/>
<!-- <UButton
v-if="row.state === 'submitted'"
<UButton
v-if="row.state === 'submitted' && canViewAll"
color="primary"
icon="i-heroicons-check"
label="Genehmigen"
variant="soft"
@click.stop="handleApprove(row)"
/>-->
/>
</div>
</UCard>
</UDashboardPanelContent>
<!-- ➕ FLOATING ACTION BUTTON -->
<FloatingActionButton
icon="i-heroicons-plus"
class="!fixed bottom-6 right-6 z-50"
@@ -427,7 +410,6 @@ onMounted(async () => {
</div>
</template>
<!-- MODAL -->
<StaffTimeEntryModal
v-model="showModal"
:entry="editEntry"
@@ -436,4 +418,4 @@ onMounted(async () => {
:can-select-user="canViewAll"
:default-user-id="selectedUser"
/>
</template>
</template>