From fca4c26cfc2ca4e8371b66a3ba67615cc98527e0 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 12 May 2025 21:45:57 +0200
Subject: [PATCH] add support for timeFormat in the frontend

---
 .../ui/src/TimeEntry/TimeEntryAggregateRow.vue       |  2 +-
 .../ui/src/TimeEntry/TimeEntryRangeSelector.vue      |  5 +++--
 resources/js/packages/ui/src/utils/time.ts           | 12 +++++++-----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
index 9146b63e..21b03236 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
@@ -156,7 +156,7 @@ function onSelectChange(checked: boolean) {
                         <button
                             class="hidden lg:block text-text-secondary w-[110px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
                             @click="expanded = !expanded">
-                            {{ formatStartEnd(timeEntry.start, timeEntry.end) }}
+                            {{ formatStartEnd(timeEntry.start, timeEntry.end, organization?.time_format) }}
                         </button>
                     </div>
                     <button
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
index 26ff99e6..75c5f138 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
@@ -7,7 +7,8 @@ import {
 } from '@/packages/ui/src/utils/time';
 import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
 import { twMerge } from 'tailwind-merge';
-import { type Organization } from '@/packages/api/src';
+import type { Organization } from '@/packages/api/src';
+
 defineProps<{
     start: string;
     end: string | null;
@@ -45,7 +46,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
                             open && 'border-card-border bg-card-background'
                         )
                     ">
-                    {{ formatStartEnd(start, end) }}
+                    {{ formatStartEnd(start, end, organization?.time_format) }}
                     <span v-if="showDate" class="text-text-tertiary font-medium"
                         >{{ formatDateLocalized(start, organization?.date_format) }}
                     </span>
diff --git a/resources/js/packages/ui/src/utils/time.ts b/resources/js/packages/ui/src/utils/time.ts
index 9556f927..4805f3be 100644
--- a/resources/js/packages/ui/src/utils/time.ts
+++ b/resources/js/packages/ui/src/utils/time.ts
@@ -110,9 +110,11 @@ export function calculateDifference(start: string, end: string | null) {
 /**
  * Returns a formatted time.
  * @param date - A UTC date time string.
+ * @param timeFormat - The time format to use ('12-hours' or '24-hours')
  */
-export function formatTime(date: string) {
-    return dayjs.utc(date).tz(getUserTimezone()).format('HH:mm');
+export function formatTime(date: string, timeFormat: TimeFormat = '24-hours') {
+    const format = timeFormat === '12-hours' ? 'hh:mm A' : 'HH:mm';
+    return dayjs.utc(date).tz(getUserTimezone()).format(format);
 }
 
 export function getLocalizedDayJs(timestamp?: string | null) {
@@ -169,11 +171,11 @@ export function formatWeekday(date: string) {
     return dayjs(date).format('dddd');
 }
 
-export function formatStartEnd(start: string, end: string | null) {
+export function formatStartEnd(start: string, end: string | null, timeFormat: TimeFormat = '24-hours') {
     if (end) {
-        return `${formatTime(start)} - ${formatTime(end)}`;
+        return `${formatTime(start, timeFormat)} - ${formatTime(end, timeFormat)}`;
     } else {
-        return `${formatTime(start)} - ...`;
+        return `${formatTime(start, timeFormat)} - ...`;
     }
 }