add support for interval / duration format in frontend views

resources/js/Pages/SharedReport.vue

@@ -7,13 +7,13 @@ import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
 import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, provide, ref } from 'vue';
 import { useQuery } from '@tanstack/vue-query';
 import { api } from '@/packages/api/src';
 import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
 import { useReportingStore } from '@/utils/useReporting';
 import { Head } from '@inertiajs/vue3';
-import { useTheme } from "@/utils/theme";
+import { useTheme } from '@/utils/theme';
 
 const sharedSecret = ref<string | null>(null);
 
@@ -47,6 +47,22 @@ const reportCurrency = computed(() => {
     return 'EUR';
 });
 
+const reportIntervalFormat = computed(() => {
+    return sharedReportResponseData.value?.interval_format;
+});
+
+const reportNumberFormat = computed(() => {
+    return sharedReportResponseData.value?.number_format;
+});
+
+provide(
+    'organization',
+    computed(() => ({
+        'number_format': reportNumberFormat.value,
+        'interval_format': reportIntervalFormat.value,
+    }))
+);
+
 const aggregatedTableTimeEntries = computed(() => {
     if (sharedReportResponseData.value) {
         return sharedReportResponseData.value?.data;
@@ -138,15 +154,16 @@ const tableData = computed(() => {
 });
 
 const { groupByOptions } = useReportingStore();
+
 function getGroupLabel(key: string) {
     return groupByOptions.find((option) => {
         return option.value === key;
     })?.label;
 }
+
 onMounted(async () => {
     useTheme();
-})
-
+});
 </script>
 
 <template>
@@ -214,6 +231,8 @@ onMounted(async () => {
                                     {{
                                         formatHumanReadableDuration(
                                             aggregatedTableTimeEntries.seconds,
+                                            reportIntervalFormat,
+                                            reportNumberFormat
                                         )
                                     }}
                                 </div>
@@ -222,7 +241,7 @@ onMounted(async () => {
                                     {{
                                         formatCents(
                                             aggregatedTableTimeEntries.cost,
-                                            reportCurrency,
+                                            reportCurrency
                                         )
                                     }}
                                 </div>