add support for interval / duration format in frontend views

app/Http/Resources/V1/Report/DetailedWithDataReportResource.php

@@ -73,6 +73,16 @@ class DetailedWithDataReportResource extends BaseResource
             'public_until' => $this->formatDateTime($this->resource->public_until),
             /** @var string $currency Currency code (ISO 4217) */
             'currency' => $this->resource->organization->currency,
+            /** @var string $number_format Number format */
+            'number_format' => $this->resource->organization->number_format,
+            /** @var string $currency_format Currency format */
+            'currency_format' => $this->resource->organization->currency_format,
+            /** @var string $date_format Date format */
+            'date_format' => $this->resource->organization->date_format,
+            /** @var string $interval_format Interval format */
+            'interval_format' => $this->resource->organization->interval_format,
+            /** @var string $time_format Time format */
+            'time_format' => $this->resource->organization->time_format,
             'properties' => [
                 /** @var string $group Type of first grouping */
                 'group' => $this->resource->properties->group->value,

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ProjectMoreOptionsDropdown from '@/Components/Common/Project/ProjectMoreOptionsDropdown.vue';
 import type { Project } from '@/packages/api/src';
-import { computed, ref } from 'vue';
+import { computed, ref, inject, type ComputedRef } from 'vue';
 import { CheckCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
@@ -15,6 +15,7 @@ import EstimatedTimeProgress from '@/packages/ui/src/EstimatedTimeProgress.vue';
 import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
 import { formatHumanReadableDuration } from '../../../packages/ui/src/utils/time';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import type { Organization } from '@/packages/api/src';
 
 const { clients } = storeToRefs(useClientsStore());
 const { tasks } = storeToRefs(useTasksStore());
@@ -61,6 +62,8 @@ const billableRateInfo = computed(() => {
 });
 
 const showEditProjectModal = ref(false);
+
+const organization = inject<ComputedRef<Organization>>('organization');
 </script>
 
 <template>
@@ -79,9 +82,12 @@ const showEditProjectModal = ref(false);
             <span class="overflow-ellipsis overflow-hidden">
                 {{ project.name }}
             </span>
-            <span class="text-text-secondary"> {{ projectTasksCount }} Tasks </span>
+            <span class="text-text-secondary">
+                {{ projectTasksCount }} Tasks
+            </span>
         </div>
-        <div class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-secondary">
+        <div
+            class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-secondary">
             <div
                 v-if="project.client_id"
                 class="overflow-ellipsis overflow-hidden">
@@ -91,7 +97,13 @@ const showEditProjectModal = ref(false);
         </div>
         <div class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary">
             <div v-if="project.spent_time">
-                {{ formatHumanReadableDuration(project.spent_time) }}
+                {{
+                    formatHumanReadableDuration(
+                        project.spent_time,
+                        organization?.interval_format,
+                        organization?.number_format
+                    )
+                }}
             </div>
             <div v-else>--</div>
         </div>

resources/js/Components/Common/Reporting/ReportingChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { computed, provide } from 'vue';
+import { computed, provide, inject, shallowRef, type ComputedRef } from 'vue';
 import LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import {
     formatDate,
@@ -16,7 +16,7 @@ import {
     TitleComponent,
     TooltipComponent,
 } from 'echarts/components';
-import type { AggregatedTimeEntries } from '@/packages/api/src';
+import type { AggregatedTimeEntries, Organization } from '@/packages/api/src';
 import { useCssVar } from '@vueuse/core';
 
 use([
@@ -30,6 +30,8 @@ use([
 
 provide(THEME_KEY, 'dark');
 
+const organization = inject<ComputedRef<Organization>>('organization');
+const chart = shallowRef(null);
 type GroupedData = AggregatedTimeEntries['grouped_data'];
 
 const props = defineProps<{
@@ -143,7 +145,11 @@ const option = computed(() => ({
             type: 'bar',
             tooltip: {
                 valueFormatter: (value: number) => {
-                    return formatHumanReadableDuration(value);
+                    return formatHumanReadableDuration(
+                        value,
+                        organization?.value?.interval_format,
+                        organization?.value?.number_format
+                    );
                 },
             },
         },
@@ -155,6 +161,7 @@ const option = computed(() => ({
     <div class="w-[calc(100%-1px)]">
         <v-chart
             v-if="groupedData && groupedData?.length > 0"
+            ref="chart"
             :autoresize="true"
             class="chart"
             :option="option" />

resources/js/Components/Common/Reporting/ReportingOverview.vue

@@ -0,0 +1,503 @@
+<script setup lang="ts">
+import {
+    ChartBarIcon,
+    CheckCircleIcon,
+    TagIcon,
+    UserGroupIcon,
+} from '@heroicons/vue/20/solid';
+import { FolderIcon } from '@heroicons/vue/16/solid';
+import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
+import { formatCents } from '@/packages/ui/src/utils/money';
+import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
+import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
+import TaskMultiselectDropdown from '@/Components/Common/Task/TaskMultiselectDropdown.vue';
+import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
+import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
+import MemberMultiselectDropdown from '@/Components/Common/Member/MemberMultiselectDropdown.vue';
+import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
+import PageTitle from '@/Components/Common/PageTitle.vue';
+import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
+import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
+import SelectDropdown from '../../../packages/ui/src/Input/SelectDropdown.vue';
+import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroupBySelect.vue';
+import MainContainer from '@/packages/ui/src/MainContainer.vue';
+import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
+import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
+import ReportSaveButton from '@/Components/Common/Report/ReportSaveButton.vue';
+import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
+import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
+
+import { computed, onMounted, ref, inject, type ComputedRef } from 'vue';
+import {
+    getDayJsInstance,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
+import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
+import { storeToRefs } from 'pinia';
+import {
+    type AggregatedTimeEntriesQueryParams,
+    type CreateReportBodyProperties,
+    api,
+    type Organization,
+} from '@/packages/api/src';
+import {
+    getCurrentMembershipId,
+    getCurrentOrganizationId,
+    getCurrentRole,
+} from '@/utils/useUser';
+import { useTagsStore } from '@/utils/useTags';
+import { useSessionStorage, useStorage } from '@vueuse/core';
+import { useNotificationsStore } from '@/utils/notification';
+import type { ExportFormat } from '@/types/reporting';
+import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
+
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+const startDate = useSessionStorage<string>(
+    'reporting-start-date',
+    getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
+);
+const endDate = useSessionStorage<string>(
+    'reporting-end-date',
+    getLocalizedDayJs(getDayJsInstance()().format()).format()
+);
+const selectedTags = ref<string[]>([]);
+const selectedProjects = ref<string[]>([]);
+const selectedMembers = ref<string[]>([]);
+const selectedTasks = ref<string[]>([]);
+const selectedClients = ref<string[]>([]);
+
+const billable = ref<'true' | 'false' | null>(null);
+
+const group = useStorage<GroupingOption>('reporting-group', 'project');
+const subGroup = useStorage<GroupingOption>('reporting-sub-group', 'task');
+
+const reportingStore = useReportingStore();
+
+const { aggregatedGraphTimeEntries, aggregatedTableTimeEntries } =
+    storeToRefs(reportingStore);
+
+const { groupByOptions } = reportingStore;
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
+function getFilterAttributes(): AggregatedTimeEntriesQueryParams {
+    let params: AggregatedTimeEntriesQueryParams = {
+        start: getLocalizedDayJs(startDate.value).startOf('day').utc().format(),
+        end: getLocalizedDayJs(endDate.value).endOf('day').utc().format(),
+    };
+    params = {
+        ...params,
+        member_ids:
+            selectedMembers.value.length > 0
+                ? selectedMembers.value
+                : undefined,
+        project_ids:
+            selectedProjects.value.length > 0
+                ? selectedProjects.value
+                : undefined,
+        task_ids:
+            selectedTasks.value.length > 0 ? selectedTasks.value : undefined,
+        client_ids:
+            selectedClients.value.length > 0
+                ? selectedClients.value
+                : undefined,
+        tag_ids: selectedTags.value.length > 0 ? selectedTags.value : undefined,
+        billable: billable.value !== null ? billable.value : undefined,
+    };
+    return params;
+}
+
+function updateGraphReporting() {
+    const params = getFilterAttributes();
+    if (getCurrentRole() === 'employee') {
+        params.member_id = getCurrentMembershipId();
+    }
+    params.fill_gaps_in_time_groups = 'true';
+    params.group = getOptimalGroupingOption(startDate.value, endDate.value);
+    useReportingStore().fetchGraphReporting(params);
+}
+
+function updateTableReporting() {
+    const params = getFilterAttributes();
+    if (group.value === subGroup.value) {
+        const fallbackOption = groupByOptions.find(
+            (el) => el.value !== group.value
+        );
+        if (fallbackOption?.value) {
+            subGroup.value = fallbackOption.value;
+        }
+    }
+    if (getCurrentRole() === 'employee') {
+        params.member_id = getCurrentMembershipId();
+    }
+    params.group = group.value;
+    params.sub_group = subGroup.value;
+    useReportingStore().fetchTableReporting(params);
+}
+
+function updateReporting() {
+    updateGraphReporting();
+    updateTableReporting();
+}
+
+function getOptimalGroupingOption(
+    startDate: string,
+    endDate: string
+): 'day' | 'week' | 'month' {
+    const diffInDays = getDayJsInstance()(endDate).diff(
+        getDayJsInstance()(startDate),
+        'd'
+    );
+
+    if (diffInDays <= 31) {
+        return 'day';
+    } else if (diffInDays <= 200) {
+        return 'week';
+    } else {
+        return 'month';
+    }
+}
+
+onMounted(() => {
+    updateGraphReporting();
+    updateTableReporting();
+});
+
+const { tags } = storeToRefs(useTagsStore());
+
+async function createTag(tag: string) {
+    return await useTagsStore().createTag(tag);
+}
+
+const reportProperties = computed(() => {
+    return {
+        ...getFilterAttributes(),
+        group: group.value,
+        sub_group: subGroup.value,
+        history_group: getOptimalGroupingOption(startDate.value, endDate.value),
+    } as CreateReportBodyProperties;
+});
+
+async function downloadExport(format: ExportFormat) {
+    const organizationId = getCurrentOrganizationId();
+    if (organizationId) {
+        const response = await handleApiRequestNotifications(
+            () =>
+                api.exportAggregatedTimeEntries({
+                    params: {
+                        organization: organizationId,
+                    },
+                    queries: {
+                        ...getFilterAttributes(),
+                        group: group.value,
+                        sub_group: subGroup.value,
+                        history_group: getOptimalGroupingOption(
+                            startDate.value,
+                            endDate.value
+                        ),
+                        format: format,
+                    },
+                }),
+            'Export successful',
+            'Export failed'
+        );
+
+        if (response?.download_url) {
+            showExportModal.value = true;
+            exportUrl.value = response.download_url as string;
+        }
+    }
+}
+
+const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
+import { useProjectsStore } from '@/utils/useProjects';
+
+const projectsStore = useProjectsStore();
+const { projects } = storeToRefs(projectsStore);
+const showExportModal = ref(false);
+const exportUrl = ref<string | null>(null);
+
+const groupedPieChartData = computed(() => {
+    return (
+        aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
+            const name = getNameForReportingRowEntry(
+                entry.key,
+                aggregatedTableTimeEntries.value?.grouped_type
+            );
+            let color = getRandomColorWithSeed(entry.key ?? 'none');
+            if (
+                name &&
+                aggregatedTableTimeEntries.value?.grouped_type &&
+                emptyPlaceholder[
+                    aggregatedTableTimeEntries.value?.grouped_type
+                ] === name
+            ) {
+                color = '#CCCCCC';
+            } else if (
+                aggregatedTableTimeEntries.value?.grouped_type === 'project'
+            ) {
+                color =
+                    projects.value?.find((project) => project.id === entry.key)
+                        ?.color ?? '#CCCCCC';
+            }
+            return {
+                value: entry.seconds,
+                name:
+                    getNameForReportingRowEntry(
+                        entry.key,
+                        aggregatedTableTimeEntries.value?.grouped_type
+                    ) ?? '',
+                color: color,
+            };
+        }) ?? []
+    );
+});
+
+const tableData = computed(() => {
+    return aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
+        return {
+            seconds: entry.seconds,
+            cost: entry.cost,
+            description: getNameForReportingRowEntry(
+                entry.key,
+                aggregatedTableTimeEntries.value?.grouped_type
+            ),
+            grouped_data:
+                entry.grouped_data?.map((el) => {
+                    return {
+                        seconds: el.seconds,
+                        cost: el.cost,
+                        description: getNameForReportingRowEntry(
+                            el.key,
+                            entry.grouped_type
+                        ),
+                    };
+                }) ?? [],
+        };
+    });
+});
+</script>
+
+<template>
+    <ReportingExportModal
+        v-model:show="showExportModal"
+        :export-url="exportUrl"></ReportingExportModal>
+    <MainContainer
+        class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
+        <div class="flex items-center space-x-3 sm:space-x-6">
+            <PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
+            <ReportingTabNavbar active="reporting"></ReportingTabNavbar>
+        </div>
+        <div class="flex space-x-2">
+            <ReportingExportButton
+                :download="downloadExport"></ReportingExportButton>
+            <ReportSaveButton
+                :report-properties="reportProperties"></ReportSaveButton>
+        </div>
+    </MainContainer>
+    <div class="py-2.5 w-full border-b border-default-background-separator">
+        <MainContainer class="sm:flex space-y-4 sm:space-y-0 justify-between">
+            <div
+                class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-4">
+                <div class="text-sm font-medium">Filters</div>
+                <MemberMultiselectDropdown
+                    v-model="selectedMembers"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedMembers.length"
+                            :active="selectedMembers.length > 0"
+                            title="Members"
+                            :icon="UserGroupIcon"></ReportingFilterBadge>
+                    </template>
+                </MemberMultiselectDropdown>
+                <ProjectMultiselectDropdown
+                    v-model="selectedProjects"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedProjects.length"
+                            :active="selectedProjects.length > 0"
+                            title="Projects"
+                            :icon="FolderIcon"></ReportingFilterBadge>
+                    </template>
+                </ProjectMultiselectDropdown>
+                <TaskMultiselectDropdown
+                    v-model="selectedTasks"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedTasks.length"
+                            :active="selectedTasks.length > 0"
+                            title="Tasks"
+                            :icon="CheckCircleIcon"></ReportingFilterBadge>
+                    </template>
+                </TaskMultiselectDropdown>
+                <ClientMultiselectDropdown
+                    v-model="selectedClients"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedClients.length"
+                            :active="selectedClients.length > 0"
+                            title="Clients"
+                            :icon="FolderIcon"></ReportingFilterBadge>
+                    </template>
+                </ClientMultiselectDropdown>
+                <TagDropdown
+                    v-model="selectedTags"
+                    :create-tag
+                    :tags="tags"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedTags.length"
+                            :active="selectedTags.length > 0"
+                            title="Tags"
+                            :icon="TagIcon"></ReportingFilterBadge>
+                    </template>
+                </TagDropdown>
+
+                <SelectDropdown
+                    v-model="billable"
+                    :get-key-from-item="(item) => item.value"
+                    :get-name-for-item="(item) => item.label"
+                    :items="[
+                        {
+                            label: 'Both',
+                            value: null,
+                        },
+                        {
+                            label: 'Billable',
+                            value: 'true',
+                        },
+                        {
+                            label: 'Non Billable',
+                            value: 'false',
+                        },
+                    ]"
+                    @changed="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :active="billable !== null"
+                            :title="
+                                billable === 'false'
+                                    ? 'Non Billable'
+                                    : 'Billable'
+                            "
+                            :icon="BillableIcon"></ReportingFilterBadge>
+                    </template>
+                </SelectDropdown>
+            </div>
+            <div>
+                <DateRangePicker
+                    v-model:start="startDate"
+                    v-model:end="endDate"
+                    @submit="updateReporting"></DateRangePicker>
+            </div>
+        </MainContainer>
+    </div>
+    <MainContainer>
+        <div class="pt-10 w-full px-3 relative">
+            <ReportingChart
+                :grouped-type="aggregatedGraphTimeEntries?.grouped_type"
+                :grouped-data="
+                    aggregatedGraphTimeEntries?.grouped_data
+                "></ReportingChart>
+        </div>
+    </MainContainer>
+    <MainContainer>
+        <div class="sm:grid grid-cols-4 pt-6 items-start">
+            <div
+                class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
+                <div
+                    class="text-sm flex text-text-primary items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
+                    <span>Group by</span>
+                    <ReportingGroupBySelect
+                        v-model="group"
+                        :group-by-options="groupByOptions"
+                        @changed="
+                            updateTableReporting
+                        "></ReportingGroupBySelect>
+                    <span>and</span>
+                    <ReportingGroupBySelect
+                        v-model="subGroup"
+                        :group-by-options="
+                            groupByOptions.filter((el) => el.value !== group)
+                        "
+                        @changed="
+                            updateTableReporting
+                        "></ReportingGroupBySelect>
+                </div>
+                <div
+                    class="grid items-center"
+                    style="grid-template-columns: 1fr 100px 150px">
+                    <div
+                        class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:bg-tertiary [&>*]:pb-1.5 [&>*]:pt-1 text-text-secondary text-sm">
+                        <div class="pl-6">Name</div>
+                        <div class="text-right">Duration</div>
+                        <div class="text-right pr-6">Cost</div>
+                    </div>
+                    <template
+                        v-if="
+                            aggregatedTableTimeEntries?.grouped_data &&
+                            aggregatedTableTimeEntries.grouped_data?.length > 0
+                        ">
+                        <ReportingRow
+                            v-for="entry in tableData"
+                            :key="entry.description ?? 'none'"
+                            :currency="getOrganizationCurrencyString()"
+                            :entry="entry"
+                            :type="
+                                aggregatedTableTimeEntries.grouped_type
+                            "></ReportingRow>
+                        <div
+                            class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
+                            <div class="flex items-center pl-6 font-medium">
+                                <span>Total</span>
+                            </div>
+                            <div
+                                class="justify-end flex items-center font-medium">
+                                {{
+                                    formatHumanReadableDuration(
+                                        aggregatedTableTimeEntries.seconds,
+                                        organization?.interval_format,
+                                        organization?.number_format
+                                    )
+                                }}
+                            </div>
+                            <div
+                                class="justify-end pr-6 flex items-center font-medium">
+                                {{
+                                    aggregatedTableTimeEntries.cost
+                                        ? formatCents(
+                                              aggregatedTableTimeEntries.cost,
+                                              getOrganizationCurrencyString()
+                                          )
+                                        : '--'
+                                }}
+                            </div>
+                        </div>
+                    </template>
+                    <div
+                        v-else
+                        class="chart flex flex-col items-center justify-center py-12 col-span-3">
+                        <p class="text-lg text-text-primary font-semibold">
+                            No time entries found
+                        </p>
+                        <p>Try to change the filters and time range</p>
+                    </div>
+                </div>
+            </div>
+            <div class="px-2 lg:px-4">
+                <ReportingPieChart
+                    :data="groupedPieChartData"></ReportingPieChart>
+            </div>
+        </div>
+    </MainContainer>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Reporting/ReportingPieChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { computed, provide } from 'vue';
+import { computed, provide, inject, type ComputedRef } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -11,7 +11,8 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVar } from "@vueuse/core";
+import { useCssVar } from '@vueuse/core';
+import type { Organization } from '@/packages/api/src';
 
 use([
     CanvasRenderer,
@@ -24,6 +25,8 @@ use([
 
 provide(THEME_KEY, 'dark');
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 type ReportingChartDataEntry = {
     value: number;
     name: string;
@@ -71,7 +74,11 @@ const option = computed(() => ({
             },
             tooltip: {
                 valueFormatter: (value: number) => {
-                    return formatHumanReadableDuration(value);
+                    return formatHumanReadableDuration(
+                        value,
+                        organization?.value?.interval_format,
+                        organization?.value?.number_format
+                    );
                 },
             },
             data: seriesData.value,

resources/js/Components/Common/Reporting/ReportingRow.vue

@@ -2,8 +2,9 @@
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import GroupedItemsCountButton from '@/packages/ui/src/GroupedItemsCountButton.vue';
-import { ref } from 'vue';
+import { ref, inject, type ComputedRef } from 'vue';
 import { twMerge } from 'tailwind-merge';
+import type { Organization } from '@/packages/api/src';
 
 type AggregatedGroupedData = GroupedData & {
     grouped_data?: GroupedData[] | null;
@@ -22,6 +23,8 @@ const props = defineProps<{
 }>();
 
 const expanded = ref(false);
+
+const organization = inject<ComputedRef<Organization>>('organization');
 </script>
 
 <template>
@@ -45,10 +48,16 @@ const expanded = ref(false);
             </span>
         </div>
         <div class="justify-end flex items-center">
-            {{ formatHumanReadableDuration(entry.seconds) }}
+            {{
+                formatHumanReadableDuration(
+                    entry.seconds,
+                    organization?.interval_format,
+                    organization?.number_format
+                )
+            }}
         </div>
         <div class="justify-end pr-6 flex items-center">
-            {{entry.cost ? formatCents(entry.cost, props.currency) : '--' }}
+            {{ entry.cost ? formatCents(entry.cost, props.currency) : '--' }}
         </div>
     </div>
     <div

resources/js/Components/Common/Task/TaskTableRow.vue

@@ -6,16 +6,19 @@ import TaskMoreOptionsDropdown from '@/Components/Common/Task/TaskMoreOptionsDro
 import TableRow from '@/Components/TableRow.vue';
 import { canDeleteTasks } from '@/utils/permissions';
 import TaskEditModal from '@/Components/Common/Task/TaskEditModal.vue';
-import { ref } from 'vue';
+import { ref, inject, type ComputedRef } from 'vue';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import EstimatedTimeProgress from '@/packages/ui/src/EstimatedTimeProgress.vue';
 import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
 import { formatHumanReadableDuration } from '../../../packages/ui/src/utils/time';
+import type { Organization } from '@/packages/api/src';
 
 const props = defineProps<{
     task: Task;
 }>();
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 function deleteTask() {
     useTasksStore().deleteTask(props.task.id);
 }
@@ -41,7 +44,13 @@ const showTaskEditModal = ref(false);
         <div
             class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
             <span v-if="task.spent_time">
-                {{ formatHumanReadableDuration(task.spent_time) }}
+                {{
+                    formatHumanReadableDuration(
+                        task.spent_time,
+                        organization?.interval_format,
+                        organization?.number_format
+                    )
+                }}
             </span>
             <span v-else> -- </span>
         </div>

resources/js/Components/CurrentSidebarTimer.vue

@@ -3,9 +3,10 @@ import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import dayjs from 'dayjs';
-import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
+import { formatDuration } from '@/packages/ui/src/utils/time';
 import TimeTrackerStartStop from '@/packages/ui/src/TimeTrackerStartStop.vue';
 import { getCurrentOrganizationId } from '@/utils/useUser';
+
 const store = useCurrentTimeEntryStore();
 const { currentTimeEntry, now, isActive } = storeToRefs(store);
 const { setActiveState } = store;
@@ -14,10 +15,9 @@ const currentTime = computed(() => {
     if (now.value && currentTimeEntry.value.start) {
         const startTime = dayjs(currentTimeEntry.value.start);
         const diff = now.value.diff(startTime, 's');
-        // return dayjs(diff).utc().format('HH:mm:ss');
-        return formatHumanReadableDuration(diff);
+        return formatDuration(diff);
     }
-    return formatHumanReadableDuration(0);
+    return formatDuration(0);
 });
 
 const isRunningInDifferentOrganization = computed(() => {
@@ -43,7 +43,9 @@ const isRunningInDifferentOrganization = computed(() => {
             </div>
         </div>
         <div>
-            <div class="text-text-secondary font-extrabold text-xs">Current Timer</div>
+            <div class="text-text-secondary font-extrabold text-xs">
+                Current Timer
+            </div>
             <div class="text-text-primary font-medium text-lg">
                 {{ currentTime }}
             </div>

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"

resources/js/Layouts/AppLayout.vue

@@ -15,20 +15,22 @@ import {
     UserCircleIcon,
     UserGroupIcon,
     XMarkIcon,
-    DocumentTextIcon
+    DocumentTextIcon,
 } from '@heroicons/vue/20/solid';
 import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
-import { onMounted, ref } from "vue";
+import { computed, onMounted, provide, ref } from 'vue';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores, refreshStores } from '@/utils/init';
 import {
     canManageBilling,
     canUpdateOrganization,
-    canViewClients, canViewInvoices,
+    canViewClients,
+    canViewInvoices,
     canViewMembers,
-    canViewProjects, canViewReport,
+    canViewProjects,
+    canViewReport,
     canViewTags,
 } from '@/utils/permissions';
 import { isBillingActivated, isInvoicingActivated } from '@/utils/billing';
@@ -37,7 +39,11 @@ import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
 import { fetchToken, isTokenValid } from '@/utils/session';
 import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue';
 import BillingBanner from '@/Components/Billing/BillingBanner.vue';
-import { useTheme } from "@/utils/theme";
+import { useTheme } from '@/utils/theme';
+import { useQuery } from '@tanstack/vue-query';
+import { api } from '@/packages/api/src';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
 
 defineProps({
     title: String,
@@ -45,9 +51,25 @@ defineProps({
 
 const showSidebarMenu = ref(false);
 const isUnloading = ref(false);
-onMounted(async () => {
 
-    useTheme()
+const { data: organization, isLoading: isOrganizationLoading } = useQuery({
+    queryKey: ['organization', getCurrentOrganizationId()],
+    queryFn: () =>
+        api.getOrganization({
+            params: {
+                organization: getCurrentOrganizationId()!,
+            },
+        }),
+    enabled: !!getCurrentOrganizationId(),
+});
+
+provide(
+    'organization',
+    computed(() => organization.value?.data)
+);
+
+onMounted(async () => {
+    useTheme();
     // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
     if (window.initialDataLoaded !== true) {
         window.initialDataLoaded = true;
@@ -77,7 +99,9 @@ const page = usePage<{
 </script>
 
 <template>
-    <div v-bind="$attrs" class="flex flex-wrap bg-background text-text-secondary">
+    <div
+        v-bind="$attrs"
+        class="flex flex-wrap bg-background text-text-secondary">
         <div
             :class="{
                 '!flex bg-default-background w-full z-[9999999999]':
@@ -122,17 +146,17 @@ const page = usePage<{
                                     {
                                         title: 'Overview',
                                         route: 'reporting',
-                                        show: true
+                                        show: true,
                                     },
                                     {
                                         title: 'Detailed',
                                         route: 'reporting.detailed',
-                                        show: true
+                                        show: true,
                                     },
                                     {
                                         title: 'Shared',
                                         route: 'reporting.shared',
-                                        show: canViewReport()
+                                        show: canViewReport(),
                                     },
                                 ]"
                                 :current="
@@ -183,7 +207,9 @@ const page = usePage<{
                                 :current="route().current('tags')"
                                 :href="route('tags')"></NavigationSidebarItem>
                             <NavigationSidebarItem
-                                v-if="isInvoicingActivated() && canViewInvoices()"
+                                v-if="
+                                    isInvoicingActivated() && canViewInvoices()
+                                "
                                 title="Invoices"
                                 :icon="DocumentTextIcon"
                                 :current="route().current('invoices')"
@@ -276,8 +302,12 @@ const page = usePage<{
 
                 <!-- Page Content -->
                 <main class="pb-28 flex-1">
-                    <slot />
-
+                    <div
+                        v-if="isOrganizationLoading"
+                        class="flex items-center justify-center h-screen">
+                        <LoadingSpinner />
+                    </div>
+                    <slot v-else />
                 </main>
             </div>
         </div>

resources/js/Pages/Reporting.vue

@@ -1,277 +1,8 @@
 <script setup lang="ts">
-import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
-import { FolderIcon } from '@heroicons/vue/16/solid';
-import PageTitle from '@/Components/Common/PageTitle.vue';
-import {
-    ChartBarIcon,
-    UserGroupIcon,
-    CheckCircleIcon,
-    TagIcon,
-} from '@heroicons/vue/20/solid';
-import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
-import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
-import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
-import { computed, onMounted, ref } from 'vue';
-import {
-    formatHumanReadableDuration,
-    getDayJsInstance,
-    getLocalizedDayJs,
-} from '@/packages/ui/src/utils/time';
-import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
-import { storeToRefs } from 'pinia';
-import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
-import {
-    type AggregatedTimeEntriesQueryParams,
-    type CreateReportBodyProperties,
-    api,
-} from '@/packages/api/src';
-import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
-import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
-import MemberMultiselectDropdown from '@/Components/Common/Member/MemberMultiselectDropdown.vue';
-import TaskMultiselectDropdown from '@/Components/Common/Task/TaskMultiselectDropdown.vue';
-import SelectDropdown from '@/packages/ui/src/Input/SelectDropdown.vue';
-import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroupBySelect.vue';
-import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
-import { getOrganizationCurrencyString } from '@/utils/money';
-import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
-import {
-    getCurrentMembershipId,
-    getCurrentOrganizationId,
-    getCurrentRole,
-} from '@/utils/useUser';
-import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
-import { useTagsStore } from '@/utils/useTags';
-import { formatCents } from '@/packages/ui/src/utils/money';
-import { useSessionStorage, useStorage } from '@vueuse/core';
-import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
-import { useNotificationsStore } from '@/utils/notification';
-import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
-import type { ExportFormat } from '@/types/reporting';
-import ReportSaveButton from '@/Components/Common/Report/ReportSaveButton.vue';
-import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
-const { handleApiRequestNotifications } = useNotificationsStore();
+import ReportingOverview from "@/Components/Common/Reporting/ReportingOverview.vue";
 
-const startDate = useSessionStorage<string>(
-    'reporting-start-date',
-    getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
-);
-const endDate = useSessionStorage<string>(
-    'reporting-end-date',
-    getLocalizedDayJs(getDayJsInstance()().format()).format()
-);
-const selectedTags = ref<string[]>([]);
-const selectedProjects = ref<string[]>([]);
-const selectedMembers = ref<string[]>([]);
-const selectedTasks = ref<string[]>([]);
-const selectedClients = ref<string[]>([]);
 
-const billable = ref<'true' | 'false' | null>(null);
-
-const group = useStorage<GroupingOption>('reporting-group', 'project');
-const subGroup = useStorage<GroupingOption>('reporting-sub-group', 'task');
-
-const reportingStore = useReportingStore();
-
-const { aggregatedGraphTimeEntries, aggregatedTableTimeEntries } =
-    storeToRefs(reportingStore);
-
-const { groupByOptions } = reportingStore;
-
-function getFilterAttributes(): AggregatedTimeEntriesQueryParams {
-    let params: AggregatedTimeEntriesQueryParams = {
-        start: getLocalizedDayJs(startDate.value).startOf('day').utc().format(),
-        end: getLocalizedDayJs(endDate.value).endOf('day').utc().format(),
-    };
-    params = {
-        ...params,
-        member_ids:
-            selectedMembers.value.length > 0
-                ? selectedMembers.value
-                : undefined,
-        project_ids:
-            selectedProjects.value.length > 0
-                ? selectedProjects.value
-                : undefined,
-        task_ids:
-            selectedTasks.value.length > 0 ? selectedTasks.value : undefined,
-        client_ids:
-            selectedClients.value.length > 0
-                ? selectedClients.value
-                : undefined,
-        tag_ids: selectedTags.value.length > 0 ? selectedTags.value : undefined,
-        billable: billable.value !== null ? billable.value : undefined,
-    };
-    return params;
-}
-
-function updateGraphReporting() {
-    const params = getFilterAttributes();
-    if (getCurrentRole() === 'employee') {
-        params.member_id = getCurrentMembershipId();
-    }
-    params.fill_gaps_in_time_groups = 'true';
-    params.group = getOptimalGroupingOption(startDate.value, endDate.value);
-    useReportingStore().fetchGraphReporting(params);
-}
-
-function updateTableReporting() {
-    const params = getFilterAttributes();
-    if (group.value === subGroup.value) {
-        const fallbackOption = groupByOptions.find(
-            (el) => el.value !== group.value
-        );
-        if (fallbackOption?.value) {
-            subGroup.value = fallbackOption.value;
-        }
-    }
-    if (getCurrentRole() === 'employee') {
-        params.member_id = getCurrentMembershipId();
-    }
-    params.group = group.value;
-    params.sub_group = subGroup.value;
-    useReportingStore().fetchTableReporting(params);
-}
-
-function updateReporting() {
-    updateGraphReporting();
-    updateTableReporting();
-}
-
-function getOptimalGroupingOption(
-    startDate: string,
-    endDate: string
-): 'day' | 'week' | 'month' {
-    const diffInDays = getDayJsInstance()(endDate).diff(
-        getDayJsInstance()(startDate),
-        'd'
-    );
-
-    if (diffInDays <= 31) {
-        return 'day';
-    } else if (diffInDays <= 200) {
-        return 'week';
-    } else {
-        return 'month';
-    }
-}
-
-onMounted(() => {
-    updateGraphReporting();
-    updateTableReporting();
-});
-
-const { tags } = storeToRefs(useTagsStore());
-async function createTag(tag: string) {
-    return await useTagsStore().createTag(tag);
-}
-
-const reportProperties = computed(() => {
-    return {
-        ...getFilterAttributes(),
-        group: group.value,
-        sub_group: subGroup.value,
-        history_group: getOptimalGroupingOption(startDate.value, endDate.value),
-    } as CreateReportBodyProperties;
-});
-
-async function downloadExport(format: ExportFormat) {
-    const organizationId = getCurrentOrganizationId();
-    if (organizationId) {
-        const response = await handleApiRequestNotifications(
-            () =>
-                api.exportAggregatedTimeEntries({
-                    params: {
-                        organization: organizationId,
-                    },
-                    queries: {
-                        ...getFilterAttributes(),
-                        group: group.value,
-                        sub_group: subGroup.value,
-                        history_group: getOptimalGroupingOption(
-                            startDate.value,
-                            endDate.value
-                        ),
-                        format: format,
-                    },
-                }),
-            'Export successful',
-            'Export failed'
-        );
-
-        if (response?.download_url) {
-            showExportModal.value = true;
-            exportUrl.value = response.download_url as string;
-        }
-    }
-}
-const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
-import { useProjectsStore } from '@/utils/useProjects';
-import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
-const projectsStore = useProjectsStore();
-const { projects } = storeToRefs(projectsStore);
-const showExportModal = ref(false);
-const exportUrl = ref<string | null>(null);
-
-const groupedPieChartData = computed(() => {
-    return (
-        aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
-            const name = getNameForReportingRowEntry(
-                entry.key,
-                aggregatedTableTimeEntries.value?.grouped_type
-            );
-            let color = getRandomColorWithSeed(entry.key ?? 'none');
-            if (
-                name &&
-                aggregatedTableTimeEntries.value?.grouped_type &&
-                emptyPlaceholder[
-                    aggregatedTableTimeEntries.value?.grouped_type
-                ] === name
-            ) {
-                color = '#CCCCCC';
-            } else if (
-                aggregatedTableTimeEntries.value?.grouped_type === 'project'
-            ) {
-                color =
-                    projects.value?.find((project) => project.id === entry.key)
-                        ?.color ?? '#CCCCCC';
-            }
-            return {
-                value: entry.seconds,
-                name:
-                    getNameForReportingRowEntry(
-                        entry.key,
-                        aggregatedTableTimeEntries.value?.grouped_type
-                    ) ?? '',
-                color: color,
-            };
-        }) ?? []
-    );
-});
-
-const tableData = computed(() => {
-    return aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
-        return {
-            seconds: entry.seconds,
-            cost: entry.cost,
-            description: getNameForReportingRowEntry(
-                entry.key,
-                aggregatedTableTimeEntries.value?.grouped_type
-            ),
-            grouped_data:
-                entry.grouped_data?.map((el) => {
-                    return {
-                        seconds: el.seconds,
-                        cost: el.cost,
-                        description: getNameForReportingRowEntry(
-                            el.key,
-                            entry.grouped_type
-                        ),
-                    };
-                }) ?? [],
-        };
-    });
-});
 </script>
 
 <template>
@@ -279,218 +10,6 @@ const tableData = computed(() => {
         title="Reporting"
         data-testid="reporting_view"
         class="overflow-hidden">
-        <ReportingExportModal
-            v-model:show="showExportModal"
-            :export-url="exportUrl"></ReportingExportModal>
-        <MainContainer
-            class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
-            <div class="flex items-center space-x-3 sm:space-x-6">
-                <PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
-                <ReportingTabNavbar active="reporting"></ReportingTabNavbar>
-            </div>
-            <div class="flex space-x-2">
-                <ReportingExportButton
-                    :download="downloadExport"></ReportingExportButton>
-                <ReportSaveButton
-                    :report-properties="reportProperties"></ReportSaveButton>
-            </div>
-        </MainContainer>
-        <div class="py-2.5 w-full border-b border-default-background-separator">
-            <MainContainer
-                class="sm:flex space-y-4 sm:space-y-0 justify-between">
-                <div
-                    class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-4">
-                    <div class="text-sm font-medium">Filters</div>
-                    <MemberMultiselectDropdown
-                        v-model="selectedMembers"
-                        @submit="updateReporting">
-                        <template #trigger>
-                            <ReportingFilterBadge
-                                :count="selectedMembers.length"
-                                :active="selectedMembers.length > 0"
-                                title="Members"
-                                :icon="UserGroupIcon"></ReportingFilterBadge>
-                        </template>
-                    </MemberMultiselectDropdown>
-                    <ProjectMultiselectDropdown
-                        v-model="selectedProjects"
-                        @submit="updateReporting">
-                        <template #trigger>
-                            <ReportingFilterBadge
-                                :count="selectedProjects.length"
-                                :active="selectedProjects.length > 0"
-                                title="Projects"
-                                :icon="FolderIcon"></ReportingFilterBadge>
-                        </template>
-                    </ProjectMultiselectDropdown>
-                    <TaskMultiselectDropdown
-                        v-model="selectedTasks"
-                        @submit="updateReporting">
-                        <template #trigger>
-                            <ReportingFilterBadge
-                                :count="selectedTasks.length"
-                                :active="selectedTasks.length > 0"
-                                title="Tasks"
-                                :icon="CheckCircleIcon"></ReportingFilterBadge>
-                        </template>
-                    </TaskMultiselectDropdown>
-                    <ClientMultiselectDropdown
-                        v-model="selectedClients"
-                        @submit="updateReporting">
-                        <template #trigger>
-                            <ReportingFilterBadge
-                                :count="selectedClients.length"
-                                :active="selectedClients.length > 0"
-                                title="Clients"
-                                :icon="FolderIcon"></ReportingFilterBadge>
-                        </template>
-                    </ClientMultiselectDropdown>
-                    <TagDropdown
-                        v-model="selectedTags"
-                        :create-tag
-                        :tags="tags"
-                        @submit="updateReporting">
-                        <template #trigger>
-                            <ReportingFilterBadge
-                                :count="selectedTags.length"
-                                :active="selectedTags.length > 0"
-                                title="Tags"
-                                :icon="TagIcon"></ReportingFilterBadge>
-                        </template>
-                    </TagDropdown>
-
-                    <SelectDropdown
-                        v-model="billable"
-                        :get-key-from-item="(item) => item.value"
-                        :get-name-for-item="(item) => item.label"
-                        :items="[
-                            {
-                                label: 'Both',
-                                value: null,
-                            },
-                            {
-                                label: 'Billable',
-                                value: 'true',
-                            },
-                            {
-                                label: 'Non Billable',
-                                value: 'false',
-                            },
-                        ]"
-                        @changed="updateReporting">
-                        <template #trigger>
-                            <ReportingFilterBadge
-                                :active="billable !== null"
-                                :title="
-                                    billable === 'false'
-                                        ? 'Non Billable'
-                                        : 'Billable'
-                                "
-                                :icon="BillableIcon"></ReportingFilterBadge>
-                        </template>
-                    </SelectDropdown>
-                </div>
-                <div>
-                    <DateRangePicker
-                        v-model:start="startDate"
-                        v-model:end="endDate"
-                        @submit="updateReporting"></DateRangePicker>
-                </div>
-            </MainContainer>
-        </div>
-        <MainContainer>
-            <div class="pt-10 w-full px-3 relative">
-                <ReportingChart
-                    :grouped-type="aggregatedGraphTimeEntries?.grouped_type"
-                    :grouped-data="
-                        aggregatedGraphTimeEntries?.grouped_data
-                    "></ReportingChart>
-            </div>
-        </MainContainer>
-        <MainContainer>
-            <div class="sm:grid grid-cols-4 pt-6 items-start">
-                <div
-                    class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
-                    <div
-                        class="text-sm flex text-text-primary items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
-                        <span>Group by</span>
-                        <ReportingGroupBySelect
-                            v-model="group"
-                            :group-by-options="groupByOptions"
-                            @changed="updateTableReporting"></ReportingGroupBySelect>
-                        <span>and</span>
-                        <ReportingGroupBySelect
-                            v-model="subGroup"
-                            :group-by-options="
-                                groupByOptions.filter(
-                                    (el) => el.value !== group
-                                )
-                            "
-                            @changed="updateTableReporting"></ReportingGroupBySelect>
-                    </div>
-                    <div
-                        class="grid items-center"
-                        style="grid-template-columns: 1fr 100px 150px">
-                        <div
-                            class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:bg-tertiary [&>*]:pb-1.5 [&>*]:pt-1 text-text-secondary text-sm">
-                            <div class="pl-6">Name</div>
-                            <div class="text-right">Duration</div>
-                            <div class="text-right pr-6">Cost</div>
-                        </div>
-                        <template
-                            v-if="
-                                aggregatedTableTimeEntries?.grouped_data &&
-                                aggregatedTableTimeEntries.grouped_data
-                                    ?.length > 0
-                            ">
-                            <ReportingRow
-                                v-for="entry in tableData"
-                                :key="entry.description ?? 'none'"
-                                :currency="getOrganizationCurrencyString()"
-                                :entry="entry"
-                                :type="
-                                    aggregatedTableTimeEntries.grouped_type
-                                "></ReportingRow>
-                            <div
-                                class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
-                                <div class="flex items-center pl-6 font-medium">
-                                    <span>Total</span>
-                                </div>
-                                <div
-                                    class="justify-end flex items-center font-medium">
-                                    {{
-                                        formatHumanReadableDuration(
-                                            aggregatedTableTimeEntries.seconds
-                                        )
-                                    }}
-                                </div>
-                                <div
-                                    class="justify-end pr-6 flex items-center font-medium">
-                                    {{
-                                        aggregatedTableTimeEntries.cost ?
-                                        formatCents(
-                                            aggregatedTableTimeEntries.cost,
-                                            getOrganizationCurrencyString()
-                                        ) : '--'
-                                    }}
-                                </div>
-                            </div>
-                        </template>
-                        <div
-                            v-else
-                            class="chart flex flex-col items-center justify-center py-12 col-span-3">
-                            <p class="text-lg text-text-primary font-semibold">
-                                No time entries found
-                            </p>
-                            <p>Try to change the filters and time range</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="px-2 lg:px-4">
-                    <ReportingPieChart
-                        :data="groupedPieChartData"></ReportingPieChart>
-                </div>
-            </div>
-        </MainContainer>
+        <ReportingOverview></ReportingOverview>
     </AppLayout>
 </template>

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>

resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue

@@ -6,14 +6,21 @@ import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
 import type { UpdateOrganizationBody } from '@/packages/api/src';
 import { useOrganizationStore } from '@/utils/useOrganization';
 import { storeToRefs } from 'pinia';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/Components/ui/select';
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
-
-type NumberFormat = 'point-comma' | 'comma-point' | 'space-comma' | 'space-point' | 'apostrophe-point';
-type CurrencyFormat = 'iso-code-before-with-space' | 'iso-code-after-with-space' | 'symbol-before' | 'symbol-after' | 'symbol-before-with-space' | 'symbol-after-with-space';
-type DateFormat = 'point-separated-d-m-yyyy' | 'slash-separated-mm-dd-yyyy' | 'slash-separated-dd-mm-yyyy' | 'hyphen-separated-dd-mm-yyyy' | 'hyphen-separated-mm-dd-yyyy' | 'hyphen-separated-yyyy-mm-dd';
-type TimeFormat = '12-hours' | '24-hours';
-type IntervalFormat = 'decimal' | 'hours-minutes' | 'hours-minutes-colon-separated' | 'hours-minutes-seconds-colon-separated';
+import type {
+    CurrencyFormat,
+    DateFormat,
+    TimeFormat,
+    IntervalFormat,
+} from '@/packages/ui/src/utils/time';
+import type { NumberFormat } from '@/packages/ui/src/utils/number';
 
 interface FormValues {
     number_format: NumberFormat | undefined;
@@ -37,7 +44,8 @@ const form = ref<FormValues>({
 });
 
 const mutation = useMutation({
-    mutationFn: (values: FormValues) => updateOrganization(values as UpdateOrganizationBody),
+    mutationFn: (values: FormValues) =>
+        updateOrganization(values as UpdateOrganizationBody),
     onSuccess: () => {
         queryClient.invalidateQueries({ queryKey: ['organization'] });
     },
@@ -48,10 +56,12 @@ onMounted(async () => {
     if (organization.value) {
         form.value = {
             number_format: organization.value.number_format as NumberFormat,
-            currency_format: organization.value.currency_format as CurrencyFormat,
+            currency_format: organization.value
+                .currency_format as CurrencyFormat,
             date_format: organization.value.date_format as DateFormat,
             time_format: organization.value.time_format as TimeFormat,
-            interval_format: organization.value.interval_format as IntervalFormat,
+            interval_format: organization?.value
+                .interval_format as IntervalFormat,
         };
     }
 });
@@ -73,17 +83,30 @@ async function submit() {
             <!-- Number Format -->
             <div class="col-span-6">
                 <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="numberFormat" class="mb-2" value="Number Format" />
+                    <InputLabel
+                        for="numberFormat"
+                        class="mb-2"
+                        value="Number Format" />
                     <Select v-model="form.number_format">
                         <SelectTrigger id="numberFormat">
                             <SelectValue placeholder="Select number format" />
                         </SelectTrigger>
                         <SelectContent>
-                            <SelectItem value="point-comma">1.111,11</SelectItem>
-                            <SelectItem value="comma-point">1,111.11</SelectItem>
-                            <SelectItem value="space-comma">1 111,11</SelectItem>
-                            <SelectItem value="space-point">1 111.11</SelectItem>
-                            <SelectItem value="apostrophe-point">1'111.11</SelectItem>
+                            <SelectItem value="point-comma"
+                                >1.111,11</SelectItem
+                            >
+                            <SelectItem value="comma-point"
+                                >1,111.11</SelectItem
+                            >
+                            <SelectItem value="space-comma"
+                                >1 111,11</SelectItem
+                            >
+                            <SelectItem value="space-point"
+                                >1 111.11</SelectItem
+                            >
+                            <SelectItem value="apostrophe-point"
+                                >1'111.11</SelectItem
+                            >
                         </SelectContent>
                     </Select>
                 </div>
@@ -92,18 +115,29 @@ async function submit() {
             <!-- Currency Format -->
             <div class="col-span-6">
                 <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="currencyFormat" class="mb-2" value="Currency Format" />
+                    <InputLabel
+                        for="currencyFormat"
+                        class="mb-2"
+                        value="Currency Format" />
                     <Select v-model="form.currency_format">
                         <SelectTrigger id="currencyFormat">
                             <SelectValue placeholder="Select currency format" />
                         </SelectTrigger>
                         <SelectContent>
-                            <SelectItem value="iso-code-before-with-space">EUR 111</SelectItem>
-                            <SelectItem value="iso-code-after-with-space">111 EUR</SelectItem>
+                            <SelectItem value="iso-code-before-with-space"
+                                >EUR 111</SelectItem
+                            >
+                            <SelectItem value="iso-code-after-with-space"
+                                >111 EUR</SelectItem
+                            >
                             <SelectItem value="symbol-before">€111</SelectItem>
                             <SelectItem value="symbol-after">111€</SelectItem>
-                            <SelectItem value="symbol-before-with-space">€ 111</SelectItem>
-                            <SelectItem value="symbol-after-with-space">111 €</SelectItem>
+                            <SelectItem value="symbol-before-with-space"
+                                >€ 111</SelectItem
+                            >
+                            <SelectItem value="symbol-after-with-space"
+                                >111 €</SelectItem
+                            >
                         </SelectContent>
                     </Select>
                 </div>
@@ -112,18 +146,33 @@ async function submit() {
             <!-- Date Format -->
             <div class="col-span-6">
                 <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="dateFormat" class="mb-2" value="Date Format" />
+                    <InputLabel
+                        for="dateFormat"
+                        class="mb-2"
+                        value="Date Format" />
                     <Select v-model="form.date_format">
                         <SelectTrigger id="dateFormat">
                             <SelectValue placeholder="Select date format" />
                         </SelectTrigger>
                         <SelectContent>
-                            <SelectItem value="point-separated-d-m-yyyy">D.M.YYYY</SelectItem>
-                            <SelectItem value="slash-separated-mm-dd-yyyy">MM/DD/YYYY</SelectItem>
-                            <SelectItem value="slash-separated-dd-mm-yyyy">DD/MM/YYYY</SelectItem>
-                            <SelectItem value="hyphen-separated-dd-mm-yyyy">DD-MM-YYYY</SelectItem>
-                            <SelectItem value="hyphen-separated-mm-dd-yyyy">MM-DD-YYYY</SelectItem>
-                            <SelectItem value="hyphen-separated-yyyy-mm-dd">YYYY-MM-DD</SelectItem>
+                            <SelectItem value="point-separated-d-m-yyyy"
+                                >D.M.YYYY</SelectItem
+                            >
+                            <SelectItem value="slash-separated-mm-dd-yyyy"
+                                >MM/DD/YYYY</SelectItem
+                            >
+                            <SelectItem value="slash-separated-dd-mm-yyyy"
+                                >DD/MM/YYYY</SelectItem
+                            >
+                            <SelectItem value="hyphen-separated-dd-mm-yyyy"
+                                >DD-MM-YYYY</SelectItem
+                            >
+                            <SelectItem value="hyphen-separated-mm-dd-yyyy"
+                                >MM-DD-YYYY</SelectItem
+                            >
+                            <SelectItem value="hyphen-separated-yyyy-mm-dd"
+                                >YYYY-MM-DD</SelectItem
+                            >
                         </SelectContent>
                     </Select>
                 </div>
@@ -132,14 +181,21 @@ async function submit() {
             <!-- Time Format -->
             <div class="col-span-6">
                 <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="timeFormat" class="mb-2" value="Time Format" />
+                    <InputLabel
+                        for="timeFormat"
+                        class="mb-2"
+                        value="Time Format" />
                     <Select v-model="form.time_format">
                         <SelectTrigger id="timeFormat">
                             <SelectValue placeholder="Select time format" />
                         </SelectTrigger>
                         <SelectContent>
-                            <SelectItem value="12-hours">12-hour clock</SelectItem>
-                            <SelectItem value="24-hours">24-hour clock</SelectItem>
+                            <SelectItem value="12-hours"
+                                >12-hour clock</SelectItem
+                            >
+                            <SelectItem value="24-hours"
+                                >24-hour clock</SelectItem
+                            >
                         </SelectContent>
                     </Select>
                 </div>
@@ -148,16 +204,26 @@ async function submit() {
             <!-- Interval Format -->
             <div class="col-span-6">
                 <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="intervalFormat" class="mb-2" value="Time Duration Format" />
+                    <InputLabel
+                        for="intervalFormat"
+                        class="mb-2"
+                        value="Time Duration Format" />
                     <Select v-model="form.interval_format">
                         <SelectTrigger id="intervalFormat">
                             <SelectValue placeholder="Select interval format" />
                         </SelectTrigger>
                         <SelectContent>
                             <SelectItem value="decimal">Decimal</SelectItem>
-                            <SelectItem value="hours-minutes">12h 3m</SelectItem>
-                            <SelectItem value="hours-minutes-colon-separated">12:03</SelectItem>
-                            <SelectItem value="hours-minutes-seconds-colon-separated">12:03:45</SelectItem>
+                            <SelectItem value="hours-minutes"
+                                >12h 3m</SelectItem
+                            >
+                            <SelectItem value="hours-minutes-colon-separated"
+                                >12:03</SelectItem
+                            >
+                            <SelectItem
+                                value="hours-minutes-seconds-colon-separated"
+                                >12:03:45</SelectItem
+                            >
                         </SelectContent>
                     </Select>
                 </div>
@@ -165,9 +231,7 @@ async function submit() {
         </template>
 
         <template #actions>
-            <PrimaryButton
-                :disabled="mutation.isPending.value"
-                @click="submit">
+            <PrimaryButton :disabled="mutation.isPending.value" @click="submit">
                 {{ mutation.isPending.value ? 'Saving...' : 'Save' }}
             </PrimaryButton>
         </template>

resources/js/packages/api/src/openapi.json.client.ts

@@ -524,6 +524,11 @@ const DetailedWithDataReportResource = z
         description: z.union([z.string(), z.null()]),
         public_until: z.union([z.string(), z.null()]),
         currency: z.string(),
+        number_format: z.string(),
+        currency_format: z.string(),
+        date_format: z.string(),
+        interval_format: z.string(),
+        time_format: z.string(),
         properties: z
             .object({
                 group: z.string(),

resources/js/packages/ui/src/Input/DurationHumanInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import parse from 'parse-duration';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, inject } from 'vue';
 import {
     formatHumanReadableDuration,
     getDayJsInstance,
@@ -8,6 +8,9 @@ import {
 import dayjs from 'dayjs';
 import { twMerge } from 'tailwind-merge';
 import { TextInput } from '@/packages/ui/src';
+import type { Organization } from '@/packages/api/src';
+import { type ComputedRef } from 'vue';
+
 const temporaryCustomTimerEntry = ref<string>('');
 
 const start = defineModel('start', {
@@ -18,6 +21,8 @@ const end = defineModel('end', {
     default: '',
 });
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 function isHHMM(value: string): boolean {
     return HHMMtimeRegex.test(value);
 }
@@ -70,7 +75,11 @@ function updateTimeEntryInputValue() {
     if (start.value && end.value) {
         const startTime = dayjs(start.value);
         const diff = getDayJsInstance()(end.value).diff(startTime, 'seconds');
-        temporaryCustomTimerEntry.value = formatHumanReadableDuration(diff);
+        temporaryCustomTimerEntry.value = formatHumanReadableDuration(
+            diff,
+            organization?.value?.interval_format,
+            organization?.value?.number_format
+        );
     }
 }
 </script>

resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue

@@ -9,13 +9,14 @@ import type {
     Task,
     TimeEntry,
     Client,
+    Organization,
 } from '@/packages/api/src';
 import TimeEntryDescriptionInput from '@/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue';
 import TimeEntryRowTagDropdown from '@/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue';
 import TimeEntryMoreOptionsDropdown from '@/packages/ui/src/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
-import { ref } from 'vue';
+import { ref, inject, type ComputedRef } from 'vue';
 import {
     formatHumanReadableDuration,
     formatStartEnd,
@@ -48,6 +49,8 @@ const emit = defineEmits<{
     unselected: [TimeEntry[]];
 }>();
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 function updateTimeEntryDescription(description: string) {
     props.updateTimeEntries(
         props.timeEntry.timeEntries.map((timeEntry: TimeEntry) => timeEntry.id),
@@ -113,10 +116,10 @@ function onSelectChange(checked: boolean) {
                         </GroupedItemsCountButton>
                         <TimeEntryDescriptionInput
                             class="min-w-0 mr-4"
-                            :model-value="
-                                timeEntry.description
-                            "
-                            @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
+                            :model-value="timeEntry.description"
+                            @changed="
+                                updateTimeEntryDescription
+                            "></TimeEntryDescriptionInput>
                         <TimeTrackerProjectTaskDropdown
                             :clients
                             :create-project
@@ -128,10 +131,10 @@ function onSelectChange(checked: boolean) {
                             :project="timeEntry.project_id"
                             :enable-estimated-time
                             :currency="currency"
-                            :task="
-                                timeEntry.task_id
-                            "
-                            @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
+                            :task="timeEntry.task_id"
+                            @changed="
+                                updateProjectAndTask
+                            "></TimeTrackerProjectTaskDropdown>
                     </div>
                 </div>
                 <div class="flex items-center font-medium lg:space-x-2">
@@ -139,7 +142,9 @@ function onSelectChange(checked: boolean) {
                         :create-tag
                         :tags="tags"
                         :model-value="timeEntry.tags"
-                        @changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
+                        @changed="
+                            updateTimeEntryTags
+                        "></TimeEntryRowTagDropdown>
                     <BillableToggleButton
                         :model-value="timeEntry.billable"
                         class="opacity-50 focus-visible:opacity-100 group-hover:opacity-100"
@@ -155,17 +160,23 @@ function onSelectChange(checked: boolean) {
                         </button>
                     </div>
                     <button
-                        class="text-text-primary min-w-[90px] px-2 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
+                        class="text-text-primary min-w-[90px] px-2.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
                         @click="expanded = !expanded">
                         {{
-                            formatHumanReadableDuration(timeEntry.duration ?? 0)
+                            formatHumanReadableDuration(
+                                timeEntry.duration ?? 0,
+                                organization?.interval_format,
+                                organization?.number_format
+                            )
                         }}
                     </button>
 
                     <TimeTrackerStartStop
                         :active="!!(timeEntry.start && !timeEntry.end)"
                         class="opacity-20 hidden sm:flex group-hover:opacity-100 focus-visible:opacity-100"
-                        @changed="onStartStopClick(timeEntry)"></TimeTrackerStartStop>
+                        @changed="
+                            onStartStopClick(timeEntry)
+                        "></TimeTrackerStartStop>
                     <TimeEntryMoreOptionsDropdown
                         @delete="
                             deleteTimeEntries(timeEntry?.timeEntries ?? [])

resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue

@@ -2,10 +2,18 @@
 import {
     calculateDifference,
     formatHumanReadableDuration,
+    parseTimeInput,
 } from '@/packages/ui/src/utils/time';
-import { computed, defineProps, ref } from 'vue';
-import parse from 'parse-duration';
+import { computed, defineProps, ref, inject, type ComputedRef } from 'vue';
 import dayjs from 'dayjs';
+import type { Organization } from '@/packages/api/src';
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
+const organizationSettings = computed(() => ({
+    intervalFormat: organization?.value?.interval_format ?? 'hours-minutes',
+    numberFormat: organization?.value?.number_format ?? 'point',
+}));
 
 const props = defineProps<{
     start: string;
@@ -19,15 +27,22 @@ const temporaryCustomTimerEntry = ref<string>('');
 const open = ref(false);
 
 function updateTimerAndStartLiveTimerUpdate() {
-    const time = parse(temporaryCustomTimerEntry.value, 's');
-    if (time && time > 0) {
+    const defaultUnit =
+        organizationSettings?.value?.intervalFormat === 'decimal'
+            ? 'hours'
+            : 'minutes';
+    const { seconds } = parseTimeInput(
+        temporaryCustomTimerEntry.value,
+        defaultUnit
+    );
+    if (seconds && seconds > 0) {
         let newEndDate = props.end;
         let newStartDate = props.start;
         if (props.end) {
             // only update end for time entries that are already finished
-            newEndDate = dayjs(props.start).utc().add(time, 's').format();
+            newEndDate = dayjs(props.start).utc().add(seconds, 's').format();
         } else {
-            newStartDate = dayjs().utc().subtract(time, 's').format();
+            newStartDate = dayjs().utc().subtract(seconds, 's').format();
         }
         emit('changed', newStartDate, newEndDate);
     }
@@ -40,7 +55,9 @@ const currentTime = computed({
             return temporaryCustomTimerEntry.value;
         }
         return formatHumanReadableDuration(
-            calculateDifference(props.start, props.end)
+            calculateDifference(props.start, props.end),
+            organizationSettings.value.intervalFormat,
+            organizationSettings.value.numberFormat
         );
     },
     // setter
@@ -63,8 +80,9 @@ function selectInput(event: Event) {
 <template>
     <input
         v-model="currentTime"
+        data-testid="time_entry_duration_input"
         name="Duration"
-        class="text-text-primary w-[90px] px-2 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
+        class="text-text-primary w-[90px] px-2.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
         @focus="selectInput"
         @keydown.tab="open = false"
         @blur="updateTimerAndStartLiveTimerUpdate"

resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue

@@ -6,6 +6,11 @@ import {
     formatWeekday,
 } from '@/packages/ui/src/utils/time';
 import Checkbox from '../Input/Checkbox.vue';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
 defineProps<{
     date: string;
     duration: number;
@@ -58,7 +63,13 @@ function selectUnselectAll(value: boolean) {
                 </div>
                 <div class="text-text-secondary pr-[90px] lg:pr-[92px]">
                     <span class="font-semibold">
-                        {{ formatHumanReadableDuration(duration) }}
+                        {{
+                            formatHumanReadableDuration(
+                                duration,
+                                organization?.interval_format,
+                                organization?.number_format
+                            )
+                        }}
                     </span>
                 </div>
             </div>

resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue

@@ -3,8 +3,11 @@ import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import { computed, ref } from 'vue';
 import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
 import dayjs, { Dayjs } from 'dayjs';
-import parse from 'parse-duration';
-import { formatDuration, getDayJsInstance } from '@/packages/ui/src/utils/time';
+import {
+    formatDuration,
+    getDayJsInstance,
+    parseTimeInput,
+} from '@/packages/ui/src/utils/time';
 import type { TimeEntry } from '@/packages/api/src';
 
 const currentTimeEntry = defineModel<TimeEntry>('currentTimeEntry', {
@@ -28,6 +31,7 @@ function pauseLiveTimerUpdate(event: FocusEvent) {
 
 function onTimeEntryEnterPress() {
     updateTimerAndStartLiveTimerUpdate();
+    open.value = false;
     const activeElement = document.activeElement as HTMLElement;
     activeElement?.blur();
 }
@@ -55,36 +59,13 @@ const currentTime = computed({
 });
 
 function updateTimerAndStartLiveTimerUpdate() {
-    const time = parse(temporaryCustomTimerEntry.value, 's');
+    const { seconds } = parseTimeInput(
+        temporaryCustomTimerEntry.value,
+        'minutes'
+    );
 
-    if (isNumeric(temporaryCustomTimerEntry.value)) {
-        const newStartDate = dayjs().subtract(
-            parseInt(temporaryCustomTimerEntry.value),
-            'm'
-        );
-        currentTimeEntry.value.start = newStartDate.utc().format();
-        if (currentTimeEntry.value.id !== '') {
-            emit('updateTimer');
-        } else {
-            emit('startTimer');
-        }
-    } else if (isHHMM(temporaryCustomTimerEntry.value)) {
-        const results = parseHHMM(temporaryCustomTimerEntry.value);
-        if (results) {
-            const newStartDate = dayjs()
-                .subtract(parseInt(results[1]), 'h')
-                .subtract(parseInt(results[2]), 'm');
-            currentTimeEntry.value.start = newStartDate.utc().format();
-            if (currentTimeEntry.value.id !== '') {
-                emit('updateTimer');
-            } else {
-                emit('startTimer');
-            }
-        }
-    }
-    // try to parse natural language like "1h 30m"
-    else if (time && time > 1) {
-        const newStartDate = dayjs().subtract(time, 's');
+    if (seconds && seconds > 0) {
+        const newStartDate = dayjs().subtract(seconds, 's');
         currentTimeEntry.value.start = newStartDate.utc().format();
         if (currentTimeEntry.value.id !== '') {
             emit('updateTimer');
@@ -92,26 +73,11 @@ function updateTimerAndStartLiveTimerUpdate() {
             emit('startTimer');
         }
     }
-    // fallback to minutes if just a number is given
     now.value = dayjs().utc();
     temporaryCustomTimerEntry.value = '';
     emit('startLiveTimer');
 }
 
-function isNumeric(value: string) {
-    return /^-?\d+$/.test(value);
-}
-
-const HHMMtimeRegex = /^([0-9]{1,2}):([0-5]?[0-9])$/;
-
-function isHHMM(value: string): boolean {
-    return HHMMtimeRegex.test(value);
-}
-
-function parseHHMM(value: string): string[] | null {
-    return value.match(HHMMtimeRegex);
-}
-
 const temporaryCustomTimerEntry = ref<string>('');
 
 async function updateTimeRange(newStart: string) {
@@ -161,8 +127,8 @@ function focusNextElement(e: KeyboardEvent) {
 }
 
 function closeAndFocusInput() {
-    inputField.value?.focus();
     open.value = false;
+    inputField.value?.focus();
 }
 </script>
 
@@ -173,7 +139,7 @@ function closeAndFocusInput() {
             align="center"
             :auto-focus="false"
             :close-on-content-click="false"
-            @submit="open = false">
+            @submit="closeAndFocusInput">
             <template #trigger>
                 <input
                     ref="inputField"

resources/js/packages/ui/src/utils/number.ts

@@ -0,0 +1,41 @@
+export type NumberFormat =
+    | 'point-comma'
+    | 'comma-point'
+    | 'space-comma'
+    | 'space-point'
+    | 'apostrophe-point';
+
+/**
+ * Formats a number according to the specified format
+ * @param value - The number to format
+ * @param format - The format to use
+ * @returns The formatted number as a string
+ */
+export function formatNumber(value: number, format?: string): string {
+    // Convert to fixed 2 decimal places first
+    const parts = value.toFixed(2).split('.');
+    const wholePart = parts[0];
+    const decimalPart = parts[1];
+
+    // Format the whole number part based on the format
+    let formattedWhole: string;
+    switch (format) {
+        case 'point-comma':
+            formattedWhole = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+            return `${formattedWhole},${decimalPart}`;
+        case 'comma-point':
+            formattedWhole = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            return `${formattedWhole}.${decimalPart}`;
+        case 'space-comma':
+            formattedWhole = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+            return `${formattedWhole},${decimalPart}`;
+        case 'space-point':
+            formattedWhole = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+            return `${formattedWhole}.${decimalPart}`;
+        case 'apostrophe-point':
+            formattedWhole = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, "'");
+            return `${formattedWhole}.${decimalPart}`;
+        default:
+            return value.toString();
+    }
+}

resources/js/packages/ui/src/utils/time.ts

@@ -6,10 +6,34 @@ import isYesterday from 'dayjs/plugin/isYesterday';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
+import parse from 'parse-duration';
 
 import { getUserTimezone, getWeekStart } from './settings';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import { computed } from 'vue';
+import { formatNumber } from './number';
+
+export type CurrencyFormat =
+    | 'iso-code-before-with-space'
+    | 'iso-code-after-with-space'
+    | 'symbol-before'
+    | 'symbol-after'
+    | 'symbol-before-with-space'
+    | 'symbol-after-with-space';
+export type DateFormat =
+    | 'point-separated-d-m-yyyy'
+    | 'slash-separated-mm-dd-yyyy'
+    | 'slash-separated-dd-mm-yyyy'
+    | 'hyphen-separated-dd-mm-yyyy'
+    | 'hyphen-separated-mm-dd-yyyy'
+    | 'hyphen-separated-yyyy-mm-dd';
+export type TimeFormat = '12-hours' | '24-hours';
+export type IntervalFormat =
+    | 'decimal'
+    | 'hours-minutes'
+    | 'hours-minutes-colon-separated'
+    | 'hours-minutes-seconds-colon-separated';
+export type TimeInputUnit = 'minutes' | 'hours';
 
 dayjs.extend(relativeTime);
 dayjs.extend(isToday);
@@ -40,11 +64,28 @@ export const firstDayIndex = computed(() => {
     return apiDayOrder.indexOf(getWeekStart());
 });
 
-export function formatHumanReadableDuration(duration: number): string {
+export function formatHumanReadableDuration(
+    duration: number,
+    intervalFormat?: string,
+    numberFormat?: string
+): string {
     const dayJsDuration = dayjs.duration(duration, 's');
     const hours = Math.floor(dayJsDuration.asHours());
     const minutes = dayJsDuration.minutes();
-    return `${hours}h ${minutes.toString().padStart(2, '0')}min`;
+    const seconds = dayJsDuration.seconds();
+
+    switch (intervalFormat) {
+        case 'decimal':
+            return formatNumber(dayJsDuration.asHours(), numberFormat) + ' h';
+        case 'hours-minutes':
+            return `${hours}h ${minutes.toString().padStart(2, '0')}min`;
+        case 'hours-minutes-colon-separated':
+            return `${hours}:${minutes.toString().padStart(2, '0')}`;
+        case 'hours-minutes-seconds-colon-separated':
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        default:
+            return `${hours}h ${minutes.toString().padStart(2, '0')}min`;
+    }
 }
 
 export function formatDuration(duration: number): string {
@@ -131,3 +172,44 @@ export function formatStartEnd(start: string, end: string | null) {
         return `${formatTime(start)} - ...`;
     }
 }
+
+export function parseTimeInput(
+    input: string,
+    defaultUnit: TimeInputUnit = 'minutes'
+): {
+    seconds: number | null;
+    isHHMM: boolean;
+} {
+    // Check if input is a decimal number (hours)
+    const decimalRegex = /^-?\d+[.,]\d+$/;
+    if (decimalRegex.test(input)) {
+        const hours = parseFloat(input.replace(',', '.'));
+        return { seconds: Math.round(hours * 3600), isHHMM: false };
+    }
+
+    // Check if input is just a number (minutes or hours based on defaultUnit)
+    if (/^-?\d+$/.test(input)) {
+        const value = parseInt(input);
+        const seconds = defaultUnit === 'minutes' ? value * 60 : value * 3600;
+        return { seconds, isHHMM: false };
+    }
+
+    // Check if input is in HH:MM format
+    const HHMMtimeRegex = /^([0-9]{1,2}):([0-5]?[0-9])$/;
+    if (HHMMtimeRegex.test(input)) {
+        const match = input.match(HHMMtimeRegex);
+        if (match) {
+            const hours = parseInt(match[1]);
+            const minutes = parseInt(match[2]);
+            return { seconds: (hours * 60 + minutes) * 60, isHHMM: true };
+        }
+    }
+
+    // Try to parse natural language like "1h 30m"
+    const parsedDuration = parse(input, 's');
+    if (parsedDuration && parsedDuration > 0) {
+        return { seconds: parsedDuration, isHHMM: false };
+    }
+
+    return { seconds: null, isHHMM: false };
+}