mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-09 08:42:15 +01:00
50 lines
1.8 KiB
Vue
50 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { useQuery } from '@tanstack/vue-query';
|
|
import { computed } from 'vue';
|
|
import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
|
|
import DayOverviewCardEntry from '@/Components/Dashboard/DayOverviewCardEntry.vue';
|
|
import { CalendarIcon } from '@heroicons/vue/20/solid';
|
|
import { getCurrentOrganizationId } from '@/utils/useUser';
|
|
import { api } from '@/packages/api/src';
|
|
import { LoadingSpinner } from '@/packages/ui/src';
|
|
|
|
// Get the organization ID using the utility function
|
|
const organizationId = computed(() => getCurrentOrganizationId());
|
|
|
|
// Set up the query
|
|
const { data: last7Days, isLoading } = useQuery({
|
|
queryKey: ['lastSevenDays', organizationId],
|
|
queryFn: () => {
|
|
return api.lastSevenDays({
|
|
params: {
|
|
organization: organizationId.value!,
|
|
},
|
|
});
|
|
},
|
|
enabled: computed(() => !!organizationId.value),
|
|
placeholderData: Array.from({ length: 7 }, (_, i) => ({
|
|
date: new Date(Date.now() - i * 24 * 60 * 60 * 1000).toISOString().split('T')[0]!,
|
|
duration: 0,
|
|
history: Array(8).fill(0) as number[],
|
|
})),
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<DashboardCard title="Last 7 Days" :icon="CalendarIcon">
|
|
<div v-if="isLoading" class="flex justify-center items-center h-40">
|
|
<LoadingSpinner />
|
|
</div>
|
|
<div v-else-if="last7Days">
|
|
<DayOverviewCardEntry
|
|
v-for="day in last7Days"
|
|
:key="day.date"
|
|
:class="last7Days.length === 7 ? 'last:border-0 first:pt-3' : ''"
|
|
:date="day.date"
|
|
:history="day.history"
|
|
:duration="day.duration"></DayOverviewCardEntry>
|
|
</div>
|
|
<div v-else class="text-center text-gray-500 py-8">No data available</div>
|
|
</DashboardCard>
|
|
</template>
|