add support for interval / duration format in frontend views

resources/js/Components/Dashboard/ActivityGraphCard.vue

@@ -1,44 +1,45 @@
 <script lang="ts" setup>
-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 VChart, { THEME_KEY } from 'vue-echarts';
+import { provide, computed, inject, type ComputedRef } 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";
-import { useQuery } from "@tanstack/vue-query";
-import { getCurrentOrganizationId } from "@/utils/useUser";
-import { api } from "@/packages/api/src";
-import { LoadingSpinner } from "@/packages/ui/src";
+    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, type Organization } from '@/packages/api/src';
+import { LoadingSpinner } from '@/packages/ui/src';
+
+const organization = inject<ComputedRef<Organization>>('organization');
 
 // Get the organization ID using the utility function
 const organizationId = computed(() => getCurrentOrganizationId());
 
-
 const { data: dailyHoursTracked, isLoading } = useQuery({
-    queryKey: ["dailyTrackedHours", organizationId],
+    queryKey: ['dailyTrackedHours', organizationId],
     queryFn: () => {
         return api.dailyTrackedHours({
             params: {
-                organization: organizationId.value!
-            }
+                organization: organizationId.value!,
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 use([
@@ -47,96 +48,104 @@ use([
     VisualMapComponent,
     CalendarComponent,
     HeatmapChart,
-    CanvasRenderer
+    CanvasRenderer,
 ]);
 
-provide(THEME_KEY, "dark");
+provide(THEME_KEY, 'dark');
 
 const max = computed(() => {
-        if (!isLoading.value && dailyHoursTracked.value) {
-            return Math.max(
-                Math.max(...dailyHoursTracked.value.map((el) => el.duration)),
-                1
-            );
-        } else {
-            return 1;
-        }
+    if (!isLoading.value && dailyHoursTracked.value) {
+        return Math.max(
+            Math.max(...dailyHoursTracked.value.map((el) => el.duration)),
+            1
+        );
+    } else {
+        return 1;
     }
-);
+});
 
-const backgroundColor = useCssVar('--color-card-background', null, { observe: true });
-const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, { observe: true });
+const backgroundColor = useCssVar('--color-card-background', null, {
+    observe: true,
+});
+const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, {
+    observe: true,
+});
 
 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
+    return {
+        tooltip: {},
+        visualMap: {
+            min: 0,
+            max: max.value,
+            type: 'piecewise',
+            orient: 'horizontal',
+            left: 'center',
+            top: 'center',
+            inRange: {
+                color: [itemBackgroundColor.value, '#2DBE45'],
             },
-            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 }
+            show: false,
+        },
+        calendar: {
+            top: 40,
+            bottom: 20,
+            left: 40,
+            right: 10,
+            cellSize: [40, 40],
+            dayLabel: {
+                firstDay: firstDayIndex.value,
             },
-            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 "";
-                        }
-
+            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,
+                                organization?.value?.interval_format,
+                                organization?.value?.number_format
+                            )
+                        );
+                    } else {
+                        return '';
                     }
-                }
+                },
             },
-            backgroundColor: "transparent"
-        };
-    });
-
+        },
+        backgroundColor: 'transparent',
+    };
+});
 </script>
 
 <template>

resources/js/Components/Dashboard/DayOverviewCardEntry.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import DayOverviewCardChart from '@/Components/Dashboard/DayOverviewCardChart.vue';
+import {
+    formatHumanReadableDate,
+    formatHumanReadableDuration,
+} from '@/packages/ui/src/utils/time';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
+
+const organization = inject<ComputedRef<Organization>>('organization');
 
 defineProps<{
     date: string;
     duration: number;
     history: number[];
 }>();
-import {
-    formatHumanReadableDate,
-    formatHumanReadableDuration,
-} from '@/packages/ui/src/utils/time';
 </script>
 
 <template>
@@ -25,7 +29,13 @@ import {
         </div>
         <div
             class="flex text-sm items-center justify-center text-text-secondary min-w-[65px] font-semibold">
-            {{ formatHumanReadableDuration(duration) }}
+            {{
+                formatHumanReadableDuration(
+                    duration,
+                    organization?.interval_format,
+                    organization?.number_format
+                )
+            }}
         </div>
     </div>
 </template>

resources/js/Components/Dashboard/ProjectsChartCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { provide } from 'vue';
+import { provide, inject, type ComputedRef } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -12,6 +12,7 @@ import {
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { useCssVar } from "@vueuse/core";
+import type { Organization } from "@/packages/api/src";
 
 use([
     CanvasRenderer,
@@ -33,6 +34,8 @@ const props = defineProps<{
     }[];
 }>();
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 const seriesData = props.weeklyProjectOverview.map((el) => {
     return {
         ...el,
@@ -69,7 +72,7 @@ const option = computed(() => ({
             },
             tooltip: {
                 valueFormatter: (value: number) => {
-                    return formatHumanReadableDuration(value);
+                    return formatHumanReadableDuration(value, organization?.value?.interval_format, organization?.value?.number_format);
                 },
             },
             data: seriesData,

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -1,23 +1,28 @@
 <script setup lang="ts">
-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 } 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";
+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, inject, type ComputedRef } 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, type Organization } from '@/packages/api/src';
 
 use([
     CanvasRenderer,
@@ -25,21 +30,21 @@ use([
     TitleComponent,
     GridComponent,
     TooltipComponent,
-    LegendComponent
+    LegendComponent,
 ]);
 
-provide(THEME_KEY, "dark");
+provide(THEME_KEY, 'dark');
 
 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()]) {
         const customOrder = [];
@@ -53,78 +58,76 @@ const weekdays = computed(() => {
     } else {
         return daysOrder;
     }
-
 });
 
-
-const accentColor = useCssVar("--theme-color-chart", null, { observe: true });
+const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
 
 // Get the organization ID using the utility function
 const organizationId = computed(() => getCurrentOrganizationId());
 
+const organization = inject<ComputedRef<Organization>>('organization');
 
 // Set up the queries
 const { data: weeklyProjectOverview } = useQuery({
-    queryKey: ["weeklyProjectOverview", organizationId],
+    queryKey: ['weeklyProjectOverview', organizationId],
     queryFn: () => {
         return api.weeklyProjectOverview({
             params: {
-                organization: organizationId.value!
-            }
+                organization: organizationId.value!,
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 const { data: totalWeeklyTime } = useQuery({
-    queryKey: ["totalWeeklyTime", organizationId],
+    queryKey: ['totalWeeklyTime', organizationId],
     queryFn: () => {
         return api.totalWeeklyTime({
             params: {
-                organization: organizationId.value!
-            }
+                organization: organizationId.value!,
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 const { data: totalWeeklyBillableTime } = useQuery({
-    queryKey: ["totalWeeklyBillableTime", organizationId],
+    queryKey: ['totalWeeklyBillableTime', organizationId],
     queryFn: () => {
         return api.totalWeeklyBillableTime({
             params: {
-                organization: organizationId.value!
-            }
+                organization: organizationId.value!,
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 const { data: totalWeeklyBillableAmount } = useQuery({
-    queryKey: ["totalWeeklyBillableAmount", organizationId],
+    queryKey: ['totalWeeklyBillableAmount', organizationId],
     queryFn: () => {
         return api.totalWeeklyBillableAmount({
             params: {
-                organization: organizationId.value!
-            }
+                organization: organizationId.value!,
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 const { data: weeklyHistory } = useQuery({
-    queryKey: ["weeklyHistory", organizationId],
+    queryKey: ['weeklyHistory', organizationId],
     queryFn: () => {
         return api.weeklyHistory({
             params: {
-                organization: organizationId.value!
-            }
+                organization: organizationId.value!,
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
-
 const seriesData = computed(() => {
     if (!weeklyHistory.value) {
         return [];
@@ -137,101 +140,104 @@ const seriesData = computed(() => {
                     borderColor: new LinearGradient(0, 0, 0, 1, [
                         {
                             offset: 0,
-                            color: "rgba(" + accentColor.value + ",0.7)"
+                            color: 'rgba(' + accentColor.value + ',0.7)',
                         },
                         {
                             offset: 1,
-                            color: "rgba(" + accentColor.value + ",0.5)"
-                        }
+                            color: 'rgba(' + accentColor.value + ',0.5)',
+                        },
                     ]),
                     emphasis: {
                         color: new LinearGradient(0, 0, 0, 1, [
                             {
                                 offset: 0,
-                                color: "rgba(" + accentColor.value + ",0.9)"
+                                color: 'rgba(' + accentColor.value + ',0.9)',
                             },
                             {
                                 offset: 1,
-                                color: "rgba(" + accentColor.value + ",0.7)"
-                            }
-                        ])
+                                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)"
+                            color: 'rgba(' + accentColor.value + ',0.7)',
                         },
                         {
                             offset: 1,
-                            color: "rgba(" + accentColor.value + ",0.5)"
-                        }
-                    ])
-                }
-            }
+                            color: 'rgba(' + accentColor.value + ',0.5)',
+                        },
+                    ]),
+                },
+            },
         };
     });
 });
 
-
-const markLineColor = useCssVar("--color-border-secondary", null, { observe: true });
-const labelColor = useCssVar("--color-text-secondary", null, { observe: true });
+const markLineColor = useCssVar('--color-border-secondary', null, {
+    observe: true,
+});
+const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 const option = computed(() => {
     return {
         tooltip: {
-            trigger: "item"
+            trigger: 'item',
         },
         grid: {
             top: 0,
             right: 0,
             bottom: 50,
-            left: 0
+            left: 0,
         },
-        backgroundColor: "transparent",
+        backgroundColor: 'transparent',
         xAxis: {
-            type: "category",
+            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",
-                color: labelColor.value
+                fontFamily: 'Outfit, sans-serif',
+                color: labelColor.value,
             },
             axisTick: {
                 lineStyle: {
-                    color: "transparent" // Set desired color here
-                }
-            }
+                    color: 'transparent', // Set desired color here
+                },
+            },
         },
         yAxis: {
-            type: "value",
+            type: 'value',
             splitLine: {
                 lineStyle: {
-                    color: markLineColor.value
-                }
-            }
+                    color: markLineColor.value,
+                },
+            },
         },
         series: [
             {
                 data: seriesData.value,
-                type: "bar",
+                type: 'bar',
                 tooltip: {
                     valueFormatter: (value: number) => {
-                        return formatHumanReadableDuration(value);
-                    }
-                }
-            }
-        ]
+                        return formatHumanReadableDuration(
+                            value,
+                            organization?.value?.interval_format,
+                            organization?.value?.number_format
+                        );
+                    },
+                },
+            },
+        ],
     };
 });
-
-
 </script>
 
 <template>
@@ -244,28 +250,42 @@ const option = computed(() => {
                 :icon="ClockIcon"></CardTitle>
             <v-chart
                 v-if="weeklyHistory"
-                :autoresize="true" class="chart" :option="option" />
+                :autoresize="true"
+                class="chart"
+                :option="option" />
         </div>
         <div class="space-y-6">
             <StatCard
                 title="Spent Time"
                 :value="
-                totalWeeklyTime ?
-                    formatHumanReadableDuration(totalWeeklyTime) : '--'" />
+                    totalWeeklyTime
+                        ? formatHumanReadableDuration(
+                              totalWeeklyTime,
+                              organization?.interval_format,
+                              organization?.number_format
+                          )
+                        : '--'
+                " />
             <StatCard
                 title="Billable Time"
                 :value="
-                totalWeeklyBillableTime ?
-                    formatHumanReadableDuration(totalWeeklyBillableTime) : '--'
+                    totalWeeklyBillableTime
+                        ? formatHumanReadableDuration(
+                              totalWeeklyBillableTime,
+                              organization?.interval_format,
+                              organization?.number_format
+                          )
+                        : '--'
                 " />
             <StatCard
                 title="Billable Amount"
                 :value="
-                totalWeeklyBillableAmount ?
-                    formatCents(
-                        totalWeeklyBillableAmount.value,
-                        getOrganizationCurrencyString()
-                    ) : '--'
+                    totalWeeklyBillableAmount
+                        ? formatCents(
+                              totalWeeklyBillableAmount.value,
+                              getOrganizationCurrencyString()
+                          )
+                        : '--'
                 " />
             <ProjectsChartCard
                 v-if="weeklyProjectOverview"