mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-15 03:32:15 +01:00
change dashboard ui to use api instead of inertia props
This commit is contained in:
Gregor Vostrak
@@ -1,29 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { provide, ref } from 'vue';
|
||||
import { use } from 'echarts/core';
|
||||
import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
|
||||
import { BoltIcon } from '@heroicons/vue/20/solid';
|
||||
import { HeatmapChart } from 'echarts/charts';
|
||||
import VChart, { THEME_KEY } from "vue-echarts";
|
||||
import { provide, computed } from "vue";
|
||||
import { use } from "echarts/core";
|
||||
import DashboardCard from "@/Components/Dashboard/DashboardCard.vue";
|
||||
import { BoltIcon } from "@heroicons/vue/20/solid";
|
||||
import { HeatmapChart } from "echarts/charts";
|
||||
import {
|
||||
CalendarComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
VisualMapComponent,
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import dayjs from 'dayjs';
|
||||
VisualMapComponent
|
||||
} from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import dayjs from "dayjs";
|
||||
import {
|
||||
firstDayIndex,
|
||||
formatDate,
|
||||
formatHumanReadableDuration,
|
||||
getDayJsInstance,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import { useCssVar } from '@vueuse/core';
|
||||
getDayJsInstance
|
||||
} from "@/packages/ui/src/utils/time";
|
||||
import { useCssVar } from "@vueuse/core";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import { getCurrentOrganizationId } from "@/utils/useUser";
|
||||
import { api } from "@/packages/api/src";
|
||||
import { LoadingSpinner } from "@/packages/ui/src";
|
||||
|
||||
const props = defineProps<{
|
||||
dailyHoursTracked: { duration: number; date: string }[];
|
||||
}>();
|
||||
// Get the organization ID using the utility function
|
||||
const organizationId = computed(() => getCurrentOrganizationId());
|
||||
|
||||
|
||||
const { data: dailyHoursTracked, isLoading } = useQuery({
|
||||
queryKey: ["dailyTrackedHours", organizationId],
|
||||
queryFn: () => {
|
||||
return api.dailyTrackedHours({
|
||||
params: {
|
||||
organization: organizationId.value!
|
||||
}
|
||||
});
|
||||
},
|
||||
enabled: computed(() => !!organizationId.value)
|
||||
});
|
||||
|
||||
use([
|
||||
TitleComponent,
|
||||
@@ -31,89 +47,113 @@ use([
|
||||
VisualMapComponent,
|
||||
CalendarComponent,
|
||||
HeatmapChart,
|
||||
CanvasRenderer,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
provide(THEME_KEY, 'dark');
|
||||
provide(THEME_KEY, "dark");
|
||||
|
||||
const max = Math.max(
|
||||
Math.max(...props.dailyHoursTracked.map((el) => el.duration)),
|
||||
1
|
||||
const max = computed(() => {
|
||||
if (!isLoading.value && dailyHoursTracked.value) {
|
||||
return Math.max(
|
||||
Math.max(...dailyHoursTracked.value.map((el) => el.duration)),
|
||||
1
|
||||
);
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const backgroundColor = useCssVar('--color-bg-secondary');
|
||||
const itemBackgroundColor = useCssVar('--color-bg-tertiary');
|
||||
const option = ref({
|
||||
tooltip: {},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: max,
|
||||
type: 'piecewise',
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
inRange: {
|
||||
color: [itemBackgroundColor.value, '#2DBE45'],
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
calendar: {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 40,
|
||||
right: 10,
|
||||
cellSize: [40, 40],
|
||||
dayLabel: {
|
||||
firstDay: firstDayIndex.value,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
range: [
|
||||
dayjs().format('YYYY-MM-DD'),
|
||||
getDayJsInstance()()
|
||||
.subtract(50, 'day')
|
||||
.startOf('week')
|
||||
.format('YYYY-MM-DD'),
|
||||
],
|
||||
itemStyle: {
|
||||
color: 'transparent',
|
||||
borderWidth: 8,
|
||||
borderColor: backgroundColor.value,
|
||||
},
|
||||
yearLabel: { show: false },
|
||||
},
|
||||
series: {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
data: props.dailyHoursTracked.map((el) => [el.date, el.duration]),
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: 'rgba(255,255,255,0.05)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: (value: number, dataIndex: number) => {
|
||||
return (
|
||||
formatDate(props.dailyHoursTracked[dataIndex].date) +
|
||||
': ' +
|
||||
formatHumanReadableDuration(value)
|
||||
);
|
||||
const backgroundColor = useCssVar("--color-bg-secondary");
|
||||
const itemBackgroundColor = useCssVar("--color-bg-tertiary");
|
||||
const option = computed(() => {
|
||||
return {
|
||||
tooltip: {},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: max.value,
|
||||
type: "piecewise",
|
||||
orient: "horizontal",
|
||||
left: "center",
|
||||
top: "center",
|
||||
inRange: {
|
||||
color: [itemBackgroundColor.value, "#2DBE45"]
|
||||
},
|
||||
show: false
|
||||
},
|
||||
},
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
});
|
||||
calendar: {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 40,
|
||||
right: 10,
|
||||
cellSize: [40, 40],
|
||||
dayLabel: {
|
||||
firstDay: firstDayIndex.value
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
range: [
|
||||
dayjs().format("YYYY-MM-DD"),
|
||||
getDayJsInstance()()
|
||||
.subtract(50, "day")
|
||||
.startOf("week")
|
||||
.format("YYYY-MM-DD")
|
||||
],
|
||||
itemStyle: {
|
||||
color: "transparent",
|
||||
borderWidth: 8,
|
||||
borderColor: backgroundColor.value
|
||||
},
|
||||
yearLabel: { show: false }
|
||||
},
|
||||
series: {
|
||||
type: "heatmap",
|
||||
coordinateSystem: "calendar",
|
||||
data: dailyHoursTracked?.value?.map((el) => [el.date, el.duration]) ?? [],
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: "rgba(255,255,255,0.05)",
|
||||
borderWidth: 1
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: (value: number, dataIndex: number) => {
|
||||
if(dailyHoursTracked?.value){
|
||||
return (
|
||||
formatDate(dailyHoursTracked?.value[dataIndex].date) +
|
||||
": " +
|
||||
formatHumanReadableDuration(value)
|
||||
);
|
||||
}
|
||||
else {
|
||||
return "";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
backgroundColor: "transparent"
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardCard title="Activity Graph" :icon="BoltIcon">
|
||||
<div class="px-2">
|
||||
<v-chart
|
||||
class="chart"
|
||||
:autoresize="true"
|
||||
:option="option"
|
||||
style="height: 260px; background-color: transparent" />
|
||||
<div v-if="isLoading" class="flex justify-center items-center h-40">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div v-else-if="dailyHoursTracked">
|
||||
<v-chart
|
||||
class="chart"
|
||||
:autoresize="true"
|
||||
:option="option"
|
||||
style="height: 260px; background-color: transparent" />
|
||||
</div>
|
||||
<div v-else class="text-center text-gray-500 py-8">
|
||||
No activity data available
|
||||
</div>
|
||||
</div>
|
||||
</DashboardCard>
|
||||
</template>
|
||||
|
||||
@@ -1,24 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
|
||||
import DayOverviewCardEntry from '@/Components/Dashboard/DayOverviewCardEntry.vue';
|
||||
import { CalendarIcon } from '@heroicons/vue/20/solid';
|
||||
defineProps<{
|
||||
last7Days: {
|
||||
date: string;
|
||||
duration: number; // Total duration in seconds
|
||||
history: number[]; // Array representing the duration in seconds of the 3h windows for the day
|
||||
}[];
|
||||
}>();
|
||||
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)
|
||||
}))
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardCard title="Last 7 Days" :icon="CalendarIcon">
|
||||
<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 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>
|
||||
|
||||
@@ -1,32 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import RecentlyTrackedTasksCardEntry from '@/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue';
|
||||
import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
|
||||
import { CheckCircleIcon } from '@heroicons/vue/20/solid';
|
||||
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
|
||||
import { PlusCircleIcon } from '@heroicons/vue/24/solid';
|
||||
import { router } from '@inertiajs/vue3';
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import { computed } from "vue";
|
||||
import RecentlyTrackedTasksCardEntry from "@/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue";
|
||||
import DashboardCard from "@/Components/Dashboard/DashboardCard.vue";
|
||||
import { CheckCircleIcon } from "@heroicons/vue/20/solid";
|
||||
import SecondaryButton from "@/packages/ui/src/Buttons/SecondaryButton.vue";
|
||||
import { PlusCircleIcon } from "@heroicons/vue/24/solid";
|
||||
import { router } from "@inertiajs/vue3";
|
||||
import { getCurrentMembershipId, getCurrentOrganizationId } from "@/utils/useUser";
|
||||
import { api } from "@/packages/api/src";
|
||||
import { LoadingSpinner } from "@/packages/ui/src";
|
||||
|
||||
const props = defineProps<{
|
||||
latestTasks: {
|
||||
id: string;
|
||||
name: string;
|
||||
project_name: string;
|
||||
project_id: string;
|
||||
}[];
|
||||
}>();
|
||||
// Get the organization ID using the utility function
|
||||
const organizationId = computed(() => getCurrentOrganizationId());
|
||||
|
||||
// Function to fetch latest tasks using the API client
|
||||
|
||||
// Set up the query
|
||||
const { data: timeEntriesResponse, isLoading, refetch } = useQuery({
|
||||
queryKey: ["timeEntries", organizationId],
|
||||
queryFn: () => {
|
||||
return api.getTimeEntries({
|
||||
params: {
|
||||
organization: organizationId.value!
|
||||
},
|
||||
queries: {
|
||||
member_id: getCurrentMembershipId()
|
||||
}
|
||||
});
|
||||
},
|
||||
enabled: computed(() => !!organizationId.value)
|
||||
});
|
||||
|
||||
const latestTasks = computed(() => {
|
||||
if (!timeEntriesResponse.value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return timeEntriesResponse.value.data;
|
||||
});
|
||||
|
||||
const filteredLatestTasks = computed(() => {
|
||||
// do not include running time entries
|
||||
const finishedTimeEntries = latestTasks.value.filter((item) => item.end !== null);
|
||||
|
||||
// filter out duplicates based on description, task, project, tags and billable
|
||||
return finishedTimeEntries.filter((item, index, self) => {
|
||||
return index === self.findIndex((t) => (
|
||||
t.description === item.description &&
|
||||
t.task_id === item.task_id &&
|
||||
t.project_id === item.project_id &&
|
||||
t.tags.length === item.tags.length &&
|
||||
t.tags.every((tag) => item.tags.includes(tag)) &&
|
||||
t.billable === item.billable
|
||||
));
|
||||
}).slice(0, 4);
|
||||
});
|
||||
|
||||
|
||||
// Listen for dashboard refresh events
|
||||
window.addEventListener("dashboard:refresh", () => {
|
||||
refetch();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardCard title="Recently Tracked Tasks" :icon="CheckCircleIcon">
|
||||
<RecentlyTrackedTasksCardEntry
|
||||
v-for="lastTask in props.latestTasks"
|
||||
:key="lastTask.id"
|
||||
:class="props.latestTasks.length === 4 ? 'last:border-0' : ''"
|
||||
:project_id="lastTask.project_id"
|
||||
:task_id="lastTask.id"
|
||||
:title="lastTask.name"></RecentlyTrackedTasksCardEntry>
|
||||
<DashboardCard title="Recent Time Entries" :icon="CheckCircleIcon">
|
||||
<div v-if="isLoading" class="flex justify-center items-center h-40">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div v-else-if="filteredLatestTasks && filteredLatestTasks.length > 0">
|
||||
<RecentlyTrackedTasksCardEntry
|
||||
v-for="lastTask in filteredLatestTasks"
|
||||
:key="lastTask.id"
|
||||
:time-entry="lastTask"
|
||||
:class="filteredLatestTasks.length === 4 ? 'last:border-0' : ''"></RecentlyTrackedTasksCardEntry>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.latestTasks.length === 0"
|
||||
v-else
|
||||
class="text-center flex flex-1 justify-center items-center">
|
||||
<div>
|
||||
<PlusCircleIcon
|
||||
@@ -36,12 +87,12 @@ const props = defineProps<{
|
||||
</h3>
|
||||
<p class="pb-5 text-sm">Create tasks inside of a project!</p>
|
||||
<SecondaryButton @click="router.visit(route('projects'))"
|
||||
>Go to Projects
|
||||
>Go to Projects
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.latestTasks.length === 1"
|
||||
v-if="latestTasks && latestTasks.length === 1"
|
||||
class="text-center flex flex-1 justify-center items-center text-sm">
|
||||
<div>
|
||||
<PlusCircleIcon
|
||||
@@ -49,7 +100,7 @@ const props = defineProps<{
|
||||
<h3 class="text-white font-semibold">Add more tasks</h3>
|
||||
<p class="pb-5">Create tasks inside of a project!</p>
|
||||
<SecondaryButton @click="router.visit(route('projects'))"
|
||||
>Go to Projects
|
||||
>Go to Projects
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,17 +6,16 @@ import { storeToRefs } from 'pinia';
|
||||
import { computed } from 'vue';
|
||||
import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
|
||||
import { getDayJsInstance } from '@/packages/ui/src/utils/time';
|
||||
import type { TimeEntry } from "@/packages/api/src";
|
||||
|
||||
const props = defineProps<{
|
||||
title: string;
|
||||
project_id: string;
|
||||
task_id: string;
|
||||
timeEntry: TimeEntry
|
||||
}>();
|
||||
|
||||
const { projects } = storeToRefs(useProjectsStore());
|
||||
|
||||
const project = computed(() => {
|
||||
return projects.value.find((project) => project.id === props.project_id);
|
||||
return projects.value.find((project) => project.id === props.timeEntry.project_id);
|
||||
});
|
||||
|
||||
const { currentTimeEntry } = storeToRefs(useCurrentTimeEntryStore());
|
||||
@@ -26,23 +25,28 @@ async function startTaskTimer() {
|
||||
if (currentTimeEntry.value.id) {
|
||||
await setActiveState(false);
|
||||
}
|
||||
currentTimeEntry.value.project_id = props.project_id;
|
||||
currentTimeEntry.value.task_id = props.task_id;
|
||||
currentTimeEntry.value.description = props.timeEntry.description;
|
||||
currentTimeEntry.value.project_id = props.timeEntry.project_id;
|
||||
currentTimeEntry.value.task_id = props.timeEntry.task_id;
|
||||
currentTimeEntry.value.tags = props.timeEntry.tags;
|
||||
currentTimeEntry.value.billable = props.timeEntry.billable;
|
||||
currentTimeEntry.value.start = getDayJsInstance().utc().format();
|
||||
await setActiveState(true);
|
||||
useCurrentTimeEntryStore().fetchCurrentTimeEntry();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="px-3.5 py-2 grid grid-cols-5 border-b border-b-card-background-separator">
|
||||
<div class="col-span-4">
|
||||
<p class="font-semibold text-white text-sm pb-1 overflow-ellipsis">
|
||||
{{ title }}
|
||||
<p class="font-medium text-white text-sm pb-1 truncate">
|
||||
<span v-if="timeEntry.description"> {{ timeEntry.description }}</span>
|
||||
<span v-else class="text-text-tertiary">No description</span>
|
||||
</p>
|
||||
<ProjectBadge
|
||||
:name="project?.name"
|
||||
:name="project?.name ?? 'No Project'"
|
||||
:color="project?.color"></ProjectBadge>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
|
||||
@@ -1,33 +1,52 @@
|
||||
<script lang="ts" setup>
|
||||
import { useQuery } from '@tanstack/vue-query';
|
||||
import { computed } from 'vue';
|
||||
import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
|
||||
import TeamActivityCardEntry from '@/Components/Dashboard/TeamActivityCardEntry.vue';
|
||||
import { UserGroupIcon } from '@heroicons/vue/20/solid';
|
||||
import { router } from '@inertiajs/vue3';
|
||||
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
|
||||
import { getCurrentOrganizationId } from '@/utils/useUser';
|
||||
import { api } from '@/packages/api/src';
|
||||
import { LoadingSpinner } from "@/packages/ui/src";
|
||||
import { router } from '@inertiajs/vue3';
|
||||
|
||||
// Get the organization ID using the utility function
|
||||
const organizationId = computed(() => getCurrentOrganizationId());
|
||||
|
||||
// Set up the query
|
||||
const { data: latestTeamActivity, isLoading } = useQuery({
|
||||
queryKey: ['latestTeamActivity', organizationId],
|
||||
queryFn: () => {
|
||||
return api.latestTeamActivity({
|
||||
params: {
|
||||
organization: organizationId.value!
|
||||
}
|
||||
})
|
||||
},
|
||||
enabled: computed(() => !!organizationId.value),
|
||||
});
|
||||
|
||||
defineProps<{
|
||||
latestTeamActivity: {
|
||||
user_id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
time_entry_id: string;
|
||||
task_id: string;
|
||||
status: boolean;
|
||||
}[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardCard title="Team Activity" :icon="UserGroupIcon">
|
||||
<TeamActivityCardEntry
|
||||
v-for="activity in latestTeamActivity"
|
||||
:key="activity.user_id"
|
||||
:class="latestTeamActivity.length === 4 ? 'last:border-0' : ''"
|
||||
:name="activity.name"
|
||||
:description="activity.description"
|
||||
:working="activity.status"></TeamActivityCardEntry>
|
||||
<div v-if="isLoading" class="flex justify-center items-center h-40">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div v-else-if="latestTeamActivity">
|
||||
<TeamActivityCardEntry
|
||||
v-for="activity in latestTeamActivity"
|
||||
:key="activity.time_entry_id"
|
||||
:class="latestTeamActivity.length === 4 ? 'last:border-0' : ''"
|
||||
:name="activity.name"
|
||||
:description="activity.description"
|
||||
:working="activity.status"></TeamActivityCardEntry>
|
||||
</div>
|
||||
<div v-else class="text-center text-gray-500 py-8">
|
||||
No team activity found
|
||||
</div>
|
||||
<div
|
||||
v-if="latestTeamActivity.length <= 1"
|
||||
v-if="latestTeamActivity && latestTeamActivity.length <= 1"
|
||||
class="text-center flex flex-1 justify-center items-center">
|
||||
<div>
|
||||
<UserGroupIcon
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps<{
|
||||
name: string;
|
||||
description: string;
|
||||
description: string | null;
|
||||
working?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
@@ -1,25 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { BarChart } from 'echarts/charts';
|
||||
import { use } from "echarts/core";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import { BarChart } from "echarts/charts";
|
||||
import {
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
} from 'echarts/components';
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { computed, provide, ref } from 'vue';
|
||||
import StatCard from '@/Components/Common/StatCard.vue';
|
||||
import { ClockIcon } from '@heroicons/vue/20/solid';
|
||||
import CardTitle from '@/packages/ui/src/CardTitle.vue';
|
||||
import LinearGradient from 'zrender/lib/graphic/LinearGradient';
|
||||
import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
|
||||
import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
|
||||
import { formatCents } from '@/packages/ui/src/utils/money';
|
||||
import { getWeekStart } from '@/packages/ui/src/utils/settings';
|
||||
import { useCssVar } from '@vueuse/core';
|
||||
import { getOrganizationCurrencyString } from '@/utils/money';
|
||||
TooltipComponent
|
||||
} from "echarts/components";
|
||||
import VChart, { THEME_KEY } from "vue-echarts";
|
||||
import { computed, provide } from "vue";
|
||||
import StatCard from "@/Components/Common/StatCard.vue";
|
||||
import { ClockIcon } from "@heroicons/vue/20/solid";
|
||||
import CardTitle from "@/packages/ui/src/CardTitle.vue";
|
||||
import LinearGradient from "zrender/lib/graphic/LinearGradient";
|
||||
import ProjectsChartCard from "@/Components/Dashboard/ProjectsChartCard.vue";
|
||||
import { formatHumanReadableDuration } from "@/packages/ui/src/utils/time";
|
||||
import { formatCents } from "@/packages/ui/src/utils/money";
|
||||
import { getWeekStart } from "@/packages/ui/src/utils/settings";
|
||||
import { useCssVar } from "@vueuse/core";
|
||||
import { getOrganizationCurrencyString } from "@/utils/money";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import { getCurrentOrganizationId } from "@/utils/useUser";
|
||||
import { api } from "@/packages/api/src";
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
@@ -27,85 +30,22 @@ use([
|
||||
TitleComponent,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
LegendComponent
|
||||
]);
|
||||
|
||||
provide(THEME_KEY, 'dark');
|
||||
|
||||
const props = defineProps<{
|
||||
weeklyProjectOverview: {
|
||||
value: number;
|
||||
name: string;
|
||||
color: string;
|
||||
}[];
|
||||
totalWeeklyTime: number;
|
||||
totalWeeklyBillableTime: number;
|
||||
totalWeeklyBillableAmount: {
|
||||
value: number;
|
||||
currency: string;
|
||||
} | null;
|
||||
weeklyHistory: {
|
||||
date: string;
|
||||
duration: number;
|
||||
}[];
|
||||
}>();
|
||||
const accentColor = useCssVar('--color-accent-quaternary');
|
||||
|
||||
const seriesData = computed(() => {
|
||||
return props.weeklyHistory.map((el) => {
|
||||
return {
|
||||
value: el.duration,
|
||||
...{
|
||||
itemStyle: {
|
||||
borderColor: new LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(' + accentColor.value + ',0.7)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(' + accentColor.value + ',0.5)',
|
||||
},
|
||||
]),
|
||||
emphasis: {
|
||||
color: new LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(' + accentColor.value + ',0.9)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(' + accentColor.value + ',0.7)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
borderRadius: [12, 12, 0, 0],
|
||||
color: new LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(' + accentColor.value + ',0.7)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(' + accentColor.value + ',0.5)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
provide(THEME_KEY, "dark");
|
||||
const accentColor = useCssVar("--color-accent-quaternary");
|
||||
|
||||
const weekdays = computed(() => {
|
||||
const daysOrder = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
||||
const daysOrder = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
||||
const dayMapping: Record<string, string> = {
|
||||
monday: 'Mon',
|
||||
tuesday: 'Tue',
|
||||
wednesday: 'Wed',
|
||||
thursday: 'Thu',
|
||||
friday: 'Fri',
|
||||
saturday: 'Sat',
|
||||
sunday: 'Sun',
|
||||
monday: "Mon",
|
||||
tuesday: "Tue",
|
||||
wednesday: "Wed",
|
||||
thursday: "Thu",
|
||||
friday: "Fri",
|
||||
saturday: "Sat",
|
||||
sunday: "Sun"
|
||||
};
|
||||
|
||||
if (dayMapping[getWeekStart()]) {
|
||||
@@ -122,59 +62,179 @@ const weekdays = computed(() => {
|
||||
}
|
||||
});
|
||||
|
||||
const markLineColor = useCssVar('--color-border-secondary');
|
||||
const markLineColor = useCssVar("--color-border-secondary");
|
||||
|
||||
const option = ref({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
|
||||
// Get the organization ID using the utility function
|
||||
const organizationId = computed(() => getCurrentOrganizationId());
|
||||
|
||||
|
||||
// Set up the queries
|
||||
const { data: weeklyProjectOverview } = useQuery({
|
||||
queryKey: ["weeklyProjectOverview", organizationId],
|
||||
queryFn: () => {
|
||||
return api.weeklyProjectOverview({
|
||||
params: {
|
||||
organization: organizationId.value!
|
||||
}
|
||||
});
|
||||
},
|
||||
grid: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 50,
|
||||
left: 0,
|
||||
enabled: computed(() => !!organizationId.value)
|
||||
});
|
||||
|
||||
const { data: totalWeeklyTime } = useQuery({
|
||||
queryKey: ["totalWeeklyTime", organizationId],
|
||||
queryFn: () => {
|
||||
return api.totalWeeklyTime({
|
||||
params: {
|
||||
organization: organizationId.value!
|
||||
}
|
||||
});
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: weekdays.value,
|
||||
axisLine: {
|
||||
enabled: computed(() => !!organizationId.value)
|
||||
});
|
||||
|
||||
const { data: totalWeeklyBillableTime } = useQuery({
|
||||
queryKey: ["totalWeeklyBillableTime", organizationId],
|
||||
queryFn: () => {
|
||||
return api.totalWeeklyBillableTime({
|
||||
params: {
|
||||
organization: organizationId.value!
|
||||
}
|
||||
});
|
||||
},
|
||||
enabled: computed(() => !!organizationId.value)
|
||||
});
|
||||
|
||||
const { data: totalWeeklyBillableAmount } = useQuery({
|
||||
queryKey: ["totalWeeklyBillableAmount", organizationId],
|
||||
queryFn: () => {
|
||||
return api.totalWeeklyBillableAmount({
|
||||
params: {
|
||||
organization: organizationId.value!
|
||||
}
|
||||
});
|
||||
},
|
||||
enabled: computed(() => !!organizationId.value)
|
||||
});
|
||||
|
||||
const { data: weeklyHistory } = useQuery({
|
||||
queryKey: ["weeklyHistory", organizationId],
|
||||
queryFn: () => {
|
||||
return api.weeklyHistory({
|
||||
params: {
|
||||
organization: organizationId.value!
|
||||
}
|
||||
});
|
||||
},
|
||||
enabled: computed(() => !!organizationId.value)
|
||||
});
|
||||
|
||||
|
||||
const seriesData = computed(() => {
|
||||
if (!weeklyHistory.value) {
|
||||
return [];
|
||||
}
|
||||
return weeklyHistory.value?.map((el) => {
|
||||
return {
|
||||
value: el.duration,
|
||||
...{
|
||||
itemStyle: {
|
||||
borderColor: new LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(" + accentColor.value + ",0.7)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(" + accentColor.value + ",0.5)"
|
||||
}
|
||||
]),
|
||||
emphasis: {
|
||||
color: new LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(" + accentColor.value + ",0.9)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(" + accentColor.value + ",0.7)"
|
||||
}
|
||||
])
|
||||
},
|
||||
borderRadius: [12, 12, 0, 0],
|
||||
color: new LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(" + accentColor.value + ",0.7)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(" + accentColor.value + ",0.5)"
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
const option = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
grid: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 50,
|
||||
left: 0
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: weekdays.value,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'transparent', // Set desired color here
|
||||
},
|
||||
color: "transparent" // Set desired color here
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
margin: 24,
|
||||
fontFamily: 'Outfit, sans-serif',
|
||||
fontWeight: 600,
|
||||
margin: 24,
|
||||
fontFamily: "Outfit, sans-serif"
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: 'transparent', // Set desired color here
|
||||
},
|
||||
},
|
||||
color: "transparent" // Set desired color here
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: markLineColor.value,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: markLineColor.value
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: seriesData,
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: (value: number) => {
|
||||
return formatHumanReadableDuration(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: seriesData.value,
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: (value: number) => {
|
||||
return formatHumanReadableDuration(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -185,29 +245,35 @@ const option = ref({
|
||||
title="This Week"
|
||||
class="pb-8"
|
||||
:icon="ClockIcon"></CardTitle>
|
||||
<v-chart :autoresize="true" class="chart" :option="option" />
|
||||
<v-chart
|
||||
v-if="weeklyHistory"
|
||||
:autoresize="true" class="chart" :option="option" />
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<StatCard
|
||||
title="Spent Time"
|
||||
:value="formatHumanReadableDuration(props.totalWeeklyTime)" />
|
||||
:value="
|
||||
totalWeeklyTime ?
|
||||
formatHumanReadableDuration(totalWeeklyTime) : '--'" />
|
||||
<StatCard
|
||||
title="Billable Time"
|
||||
:value="
|
||||
formatHumanReadableDuration(props.totalWeeklyBillableTime)
|
||||
totalWeeklyBillableTime ?
|
||||
formatHumanReadableDuration(totalWeeklyBillableTime) : '--'
|
||||
" />
|
||||
<StatCard
|
||||
title="Billable Amount"
|
||||
:value="
|
||||
props.totalWeeklyBillableAmount ?
|
||||
totalWeeklyBillableAmount ?
|
||||
formatCents(
|
||||
props.totalWeeklyBillableAmount.value,
|
||||
totalWeeklyBillableAmount.value,
|
||||
getOrganizationCurrencyString()
|
||||
) : '--'
|
||||
" />
|
||||
<ProjectsChartCard
|
||||
v-if="weeklyProjectOverview"
|
||||
:weekly-project-overview="
|
||||
props.weeklyProjectOverview
|
||||
weeklyProjectOverview
|
||||
"></ProjectsChartCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user