From 0bd32dee39df6e2a3865908421edad515fb2f02d Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 20 May 2025 12:53:51 +0200
Subject: [PATCH 1/7] add new datepicker to time entry picker, add am/pm
 support

---
 resources/js/Pages/Time.vue                   |   4 +-
 .../js/packages/ui/src/Input/DatePicker.vue   | 126 ++++++++++--------
 .../ui/src/Input/TimePickerSimple.vue         | 115 +++++++++++-----
 .../ui/src/Input/TimeRangeSelector.vue        |  41 +++---
 .../ui/src/TimeEntry/TimeEntryCreateModal.vue |  40 +++---
 5 files changed, 189 insertions(+), 137 deletions(-)

diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
index 1d011e6f..7d02016f 100644
--- a/resources/js/Pages/Time.vue
+++ b/resources/js/Pages/Time.vue
@@ -119,7 +119,8 @@ function deleteSelected() {
 </script>
 
 <template>
-    <TimeEntryCreateModal
+    <AppLayout title="Dashboard" data-testid="time_view">
+        <TimeEntryCreateModal
         v-model:show="showManualTimeEntryModal"
         :enable-estimated-time="isAllowedToPerformPremiumAction()"
         :create-project="createProject"
@@ -130,7 +131,6 @@ function deleteSelected() {
         :tasks
         :tags
         :clients></TimeEntryCreateModal>
-    <AppLayout title="Dashboard" data-testid="time_view">
         <MainContainer
             class="pt-5 lg:pt-8 pb-4 lg:pb-6">
             <div
diff --git a/resources/js/packages/ui/src/Input/DatePicker.vue b/resources/js/packages/ui/src/Input/DatePicker.vue
index 74bf6bb4..4d418512 100644
--- a/resources/js/packages/ui/src/Input/DatePicker.vue
+++ b/resources/js/packages/ui/src/Input/DatePicker.vue
@@ -1,76 +1,84 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
 import {
-    getDayJsInstance,
-    getLocalizedDayJs,
-} from '@/packages/ui/src/utils/time';
-import { twMerge } from 'tailwind-merge';
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@/Components/ui/popover';
+import { Button } from '@/Components/ui/button';
+import { Calendar } from '@/Components/ui/calendar';
+import { CalendarIcon } from 'lucide-vue-next';
+import { formatDateLocalized } from '@/packages/ui/src/utils/time';
+import { parseDate, type DateValue } from '@internationalized/date';
+import { computed, inject, type ComputedRef } from 'vue';
+import { type Organization } from '@/packages/api/src';
+import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
 
 const props = defineProps<{
     class?: string;
     tabindex?: string;
 }>();
 
-// This has to be a localized timestamp, not UTC
-const model = defineModel<string | null>({
-    default: null,
-});
-
-const tempDate = ref(getLocalizedDayJs(model.value).format('YYYY-MM-DD'));
-
-watch(model, (value) => {
-    tempDate.value = getLocalizedDayJs(value).format('YYYY-MM-DD');
-});
+const model = defineModel<string | null>();
+const emit = defineEmits<{
+    changed: [string];
+}>();
 
-function updateDate(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const newValue = target.value;
-    const newDate = getDayJsInstance()(newValue);
-    if (newDate.isValid()) {
-        model.value = getLocalizedDayJs(model.value)
-            .set('year', newDate.year())
-            .set('month', newDate.month())
-            .set('date', newDate.date())
-            .format();
-        emit('changed', model.value);
+const handleChange = (date: DateValue | undefined) => {
+    if (!date) {
+        model.value = null;
+        return;
     }
-}
 
-const datePicker = ref<HTMLInputElement | null>(null);
+    const dayjs = getLocalizedDayJs(model.value);
+    model.value = dayjs
+        .year(date.year)
+        .month(date.month - 1) // CalendarDate uses 1-based months
+        .date(date.day)
+        .format();
+    emit('changed', model.value);
+};
 
-function updateTempValue(event: Event) {
-    const target = event.target as HTMLInputElement;
-    tempDate.value = target.value;
-}
+const date = computed(() => {
+    return model.value
+        ? parseDate(getLocalizedDayJs(model.value).format('YYYY-MM-DD'))
+        : undefined;
+});
 
-const emit = defineEmits(['changed']);
+const organization = inject<ComputedRef<Organization>>('organization');
 </script>
 
 <template>
-    <div class="flex items-center text-text-secondary">
-        <input
-            id="start"
-            ref="datePicker"
-            :tabindex="tabindex"
-            :class="
-                twMerge(
-                    'bg-input-background border text-text-primary border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
-                    props.class
-                )
-            "
-            type="date"
-            name="trip-start"
-            :value="tempDate"
-            @change="updateTempValue"
-            @blur="updateDate"
-            @keydown.enter="updateDate" />
-    </div>
+    <Popover>
+        <PopoverTrigger as-child>
+            <Button
+                variant="input"
+                size="sm"
+                :class="[
+                    'w-full gap-1.5 justify-center text-left font-normal',
+                    !model && 'text-muted-foreground',
+                    props.class,
+                ]"
+                :tabindex="tabindex">
+                <CalendarIcon class="h-3 w-3" />
+                <span class="text-center">
+                    {{
+                        model
+                            ? formatDateLocalized(
+                                  model,
+                                  organization?.date_format
+                              )
+                            : 'Pick a date'
+                    }}
+                </span>
+            </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+            <Calendar
+                mode="single"
+                :model-value="date"
+                :initial-focus="true"
+                @update:model-value="handleChange"
+                />
+        </PopoverContent>
+    </Popover>
 </template>
-
-<style scoped>
-input::-webkit-calendar-picker-indicator {
-    filter: invert(1);
-
-    opacity: 0.2;
-}
-</style>
diff --git a/resources/js/packages/ui/src/Input/TimePickerSimple.vue b/resources/js/packages/ui/src/Input/TimePickerSimple.vue
index ab0fc233..ad1af619 100644
--- a/resources/js/packages/ui/src/Input/TimePickerSimple.vue
+++ b/resources/js/packages/ui/src/Input/TimePickerSimple.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
+import { ref, watch, inject, type ComputedRef } from 'vue';
+import { getLocalizedDayJs, formatTime } from '@/packages/ui/src/utils/time';
 import { useFocus } from '@vueuse/core';
 import { TextInput } from '@/packages/ui/src';
 import { twMerge } from 'tailwind-merge';
+import type { Organization } from '@/packages/api/src';
 
 // This has to be a localized timestamp, not UTC
 const model = defineModel<string | null>({
     default: null,
 });
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 const props = withDefaults(
     defineProps<{
         size?: 'base' | 'large';
@@ -24,62 +27,95 @@ const props = withDefaults(
 function updateTime(event: Event) {
     const target = event.target as HTMLInputElement;
     const newValue = target.value.trim();
-    if (newValue.split(':').length === 2) {
-        const [hours, minutes] = newValue.split(':');
-        if (!isNaN(parseInt(hours)) && !isNaN(parseInt(minutes))) {
+
+    // Get current hours and minutes for comparison
+    const currentTime = model.value ? getLocalizedDayJs(model.value) : null;
+    const currentHours = currentTime?.hour() ?? 0;
+    const currentMinutes = currentTime?.minute() ?? 0;
+
+    // Handle AM/PM format
+    const amPmMatch = newValue.match(/^(\d{1,2}):?(\d{2})?\s*(AM|PM|am|pm)$/);
+    if (amPmMatch) {
+        let hours = amPmMatch[1];
+        const minutes = amPmMatch[2] ?? '00';
+        const period = amPmMatch[3];
+        
+        hours = parseInt(hours).toString();
+        if (period.toUpperCase() === 'PM' && hours !== '12') {
+            hours = (parseInt(hours) + 12).toString();
+        } else if (period.toUpperCase() === 'AM' && hours === '12') {
+            hours = '0';
+        }
+        
+        const newHours = parseInt(hours);
+        const newMinutes = parseInt(minutes);
+        
+        if (newHours !== currentHours || newMinutes !== currentMinutes) {
             model.value = getLocalizedDayJs(model.value)
-                .set('hours', Math.min(parseInt(hours), 23))
-                .set('minutes', Math.min(parseInt(minutes), 59))
+                .set('hours', newHours)
+                .set('minutes', newMinutes)
+                .set('seconds', 0)
                 .format();
             emit('changed', model.value);
         }
+        return;
+    }
+
+    // Handle existing formats
+    if (newValue.split(':').length === 2) {
+        const [hours, minutes] = newValue.split(':');
+        if (!isNaN(parseInt(hours)) && !isNaN(parseInt(minutes))) {
+            const newHours = Math.min(parseInt(hours), 23);
+            const newMinutes = Math.min(parseInt(minutes), 59);
+            
+            if (newHours !== currentHours || newMinutes !== currentMinutes) {
+                model.value = getLocalizedDayJs(model.value)
+                    .set('hours', newHours)
+                    .set('minutes', newMinutes)
+                    .set('seconds', 0)
+                    .format();
+                emit('changed', model.value);
+            }
+        }
     }
     // check if input is only numbers
     else if (/^\d+$/.test(newValue)) {
+        let newHours = currentHours;
+        let newMinutes = currentMinutes;
+
         if (newValue.length === 4) {
             // parse 1300 to 13:00
-            const [hours, minutes] = [
-                newValue.slice(0, 2),
-                newValue.slice(2, 4),
-            ];
-            model.value = getLocalizedDayJs(model.value)
-                .set('hours', Math.min(parseInt(hours), 23))
-                .set('minutes', Math.min(parseInt(minutes), 59))
-                .format();
-            emit('changed', model.value);
+            newHours = Math.min(parseInt(newValue.slice(0, 2)), 23);
+            newMinutes = Math.min(parseInt(newValue.slice(2, 4)), 59);
         } else if (newValue.length === 3) {
             // parse 130 to 01:30
-            const [hours, minutes] = [
-                newValue.slice(0, 1),
-                newValue.slice(1, 3),
-            ];
-            model.value = getLocalizedDayJs(model.value)
-                .set('hours', Math.min(parseInt(hours), 23))
-                .set('minutes', Math.min(parseInt(minutes), 59))
-                .format();
-            emit('changed', model.value);
+            newHours = Math.min(parseInt(newValue.slice(0, 1)), 23);
+            newMinutes = Math.min(parseInt(newValue.slice(1, 3)), 59);
         } else if (newValue.length === 2) {
             // parse 13 to 13:00
-            model.value = getLocalizedDayJs(model.value)
-                .set('hours', Math.min(parseInt(newValue), 23))
-                .set('minutes', 0)
-                .format();
-            emit('changed', model.value);
+            newHours = Math.min(parseInt(newValue), 23);
+            newMinutes = 0;
         } else if (newValue.length === 1) {
             // parse 1 to 01:00
+            newHours = Math.min(parseInt(newValue), 23);
+            newMinutes = 0;
+        }
+
+        if (newHours !== currentHours || newMinutes !== currentMinutes) {
             model.value = getLocalizedDayJs(model.value)
-                .set('hours', Math.min(parseInt(newValue), 23))
-                .set('minutes', 0)
+                .set('hours', newHours)
+                .set('minutes', newMinutes)
+                .set('seconds', 0)
                 .format();
             emit('changed', model.value);
         }
     }
-
-    inputValue.value = getLocalizedDayJs(model.value).format('HH:mm');
 }
 
 watch(model, (value) => {
-    inputValue.value = value ? getLocalizedDayJs(value).format('HH:mm') : null;
+    inputValue.value = value
+        ? formatTime(value, organization?.value?.time_format || '24-hours')
+        : null;
 });
 
 const timeInput = ref<HTMLInputElement | null>(null);
@@ -88,7 +124,12 @@ const emit = defineEmits(['changed']);
 useFocus(timeInput, { initialValue: props.focus });
 
 const inputValue = ref(
-    model.value ? getLocalizedDayJs(model.value).format('HH:mm') : null
+    model.value
+        ? formatTime(
+              model.value,
+              organization?.value?.time_format || '24-hours'
+          )
+        : null
 );
 </script>
 
@@ -98,7 +139,7 @@ const inputValue = ref(
         ref="timeInput"
         v-model="inputValue"
         :class="
-            twMerge('text-center w-24 px-3 py-2', size === 'large' && 'w-28')
+            twMerge('text-center w-28 px-3 py-2', size === 'large' && 'w-28')
         "
         data-testid="time_picker_input"
         type="text"
diff --git a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
index d4b94627..a6e4ffce 100644
--- a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
+++ b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
@@ -52,26 +52,22 @@ watch(focused, (newValue, oldValue) => {
 </script>
 
 <template>
-    <div
+    <form
         ref="dropdownContent"
         class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-2">
-        <div
-            class="px-2"
-            @keydown.enter.prevent="nextTick(() => emit('close'))">
-            <div class="font-semibold text-text-primary text-sm pb-2">Start</div>
+        <div class="px-2">
+            <div class="font-semibold text-text-primary text-sm pb-2">
+                Start
+            </div>
             <div class="space-y-2">
                 <TimePickerSimple
                     v-model="tempStart"
                     data-testid="time_entry_range_start"
                     tabindex="0"
                     :focus
+                    @keydown.enter.prevent="nextTick(() => emit('close'))"
                     @keydown.exact.tab.shift.stop.prevent="emit('close')"
                     @changed="updateTimeEntry"></TimePickerSimple>
-                <DatePicker
-                    v-model="tempStart"
-                    class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
-                    @changed="updateTimeEntry"
-                    @blur.stop.prevent="emit('close')"></DatePicker>
             </div>
         </div>
         <div class="px-2">
@@ -80,16 +76,29 @@ watch(focused, (newValue, oldValue) => {
                 <TimePickerSimple
                     v-model="tempEnd"
                     data-testid="time_entry_range_end"
+                    @keydown.enter.prevent="nextTick(() => emit('close'))"
                     @changed="updateTimeEntry"></TimePickerSimple>
-                <DatePicker
-                    v-model="tempEnd"
-                    class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
-                    @changed="updateTimeEntry"></DatePicker>
             </div>
             <div v-else class="text-text-secondary">-- : --</div>
-            <div tabindex="0" @focusin="emit('close')"></div>
         </div>
-    </div>
+        <div class="px-2 pt-2">
+            <DatePicker
+                v-model="tempStart"
+                class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
+                @changed="updateTimeEntry"></DatePicker>
+        </div>
+        <div class="px-2 pt-2">
+            <DatePicker
+                v-if="tempEnd !== null"
+                v-model="tempEnd"
+                class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
+                @changed="updateTimeEntry"></DatePicker>
+        </div>
+        <div
+            tabindex="0"
+            class="focus-visible:outline-none"
+            @focusin="emit('close')"></div>
+    </form>
 </template>
 
 <style></style>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
index 1e670dd6..ecce0a0e 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
@@ -29,7 +29,7 @@ import DurationHumanInput from '@/packages/ui/src/Input/DurationHumanInput.vue';
 
 import { InformationCircleIcon } from '@heroicons/vue/20/solid';
 import type { Tag, Task } from '@/packages/api/src';
-import TimePickerSimple from "@/packages/ui/src/Input/TimePickerSimple.vue";
+import TimePickerSimple from '@/packages/ui/src/Input/TimePickerSimple.vue';
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -148,9 +148,7 @@ type BillableOption = {
                     <div class="flex-1 min-w-0">
                         <TimeTrackerProjectTaskDropdown
                             v-model:project="timeEntry.project_id"
-                            v-model:task="
-                                timeEntry.task_id
-                            "
+                            v-model:task="timeEntry.task_id"
                             :clients
                             :create-project
                             :create-client
@@ -160,7 +158,9 @@ type BillableOption = {
                             class="bg-input-background"
                             :projects="projects"
                             :tasks="tasks"
-                            :enable-estimated-time="enableEstimatedTime"></TimeTrackerProjectTaskDropdown>
+                            :enable-estimated-time="
+                                enableEstimatedTime
+                            "></TimeTrackerProjectTaskDropdown>
                     </div>
                     <div class="flex items-center space-x-2">
                         <div class="flex-col">
@@ -242,37 +242,31 @@ type BillableOption = {
                         </div>
                     </div>
                 </div>
-                <div class="">
-                    <InputLabel>Start</InputLabel>
-                    <div class="flex flex-col items-center space-y-2 mt-1">
+                <div class="grid gap-2 grid-cols-2">
+                    <div class="space-y-1">
+                        <InputLabel>Start</InputLabel>
                         <TimePickerSimple
-
                             v-model="localStart"
                             size="large"></TimePickerSimple>
-                        <DatePicker
-                            v-model="localStart"
-                            tabindex="1"
-                            class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                     </div>
-                </div>
-                <div class="">
-                    <InputLabel>End</InputLabel>
-                    <div class="flex flex-col items-center space-y-2 mt-1">
+                    <div class="space-y-1">
+                        <InputLabel>End</InputLabel>
                         <TimePickerSimple
                             v-model="localEnd"
                             size="large"></TimePickerSimple>
-                        <DatePicker
-                            v-model="localEnd"
-                            tabindex="1"
-                            class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                     </div>
+                    <DatePicker
+                        v-model="localStart"
+                        class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
+                    <DatePicker
+                        v-model="localEnd"
+                        class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                 </div>
             </div>
         </template>
         <template #footer>
-            <SecondaryButton tabindex="2" @click="show = false"> Cancel</SecondaryButton>
+            <SecondaryButton @click="show = false">Cancel</SecondaryButton>
             <PrimaryButton
-                tabindex="2"
                 class="ms-3"
                 :class="{ 'opacity-25': saving }"
                 :disabled="saving"

From 09f7fbccf60ac83385a1c3117367b03a5a256f6a Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 20 May 2025 14:42:02 +0200
Subject: [PATCH 2/7] improve hours-minutes-colon-seperated format

---
 resources/js/packages/ui/src/utils/time.ts | 27 ++++++++++++++++------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/resources/js/packages/ui/src/utils/time.ts b/resources/js/packages/ui/src/utils/time.ts
index d856ddac..fe6b072e 100644
--- a/resources/js/packages/ui/src/utils/time.ts
+++ b/resources/js/packages/ui/src/utils/time.ts
@@ -13,7 +13,6 @@ import updateLocale from 'dayjs/plugin/updateLocale';
 import { computed } from 'vue';
 import { formatNumber } from './number';
 
-
 export type DateFormat =
     | 'point-separated-d-m-yyyy'
     | 'slash-separated-mm-dd-yyyy'
@@ -28,7 +27,7 @@ const dateFormatMap: Record<DateFormat, string> = {
     'slash-separated-dd-mm-yyyy': 'DD/MM/YYYY',
     'hyphen-separated-dd-mm-yyyy': 'DD-MM-YYYY',
     'hyphen-separated-mm-dd-yyyy': 'MM-DD-YYYY',
-    'hyphen-separated-yyyy-mm-dd': 'YYYY-MM-DD'
+    'hyphen-separated-yyyy-mm-dd': 'YYYY-MM-DD',
 };
 
 export type TimeFormat = '12-hours' | '24-hours';
@@ -84,7 +83,7 @@ export function formatHumanReadableDuration(
         case 'hours-minutes':
             return `${hours}h ${minutes.toString().padStart(2, '0')}min`;
         case 'hours-minutes-colon-separated':
-            return `${hours}:${minutes.toString().padStart(2, '0')}`;
+            return `${hours}:${minutes.toString().padStart(2, '0')} h`;
         case 'hours-minutes-seconds-colon-separated':
             return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
         default:
@@ -129,7 +128,10 @@ export function getLocalizedDateFromTimestamp(timestamp: string) {
  * Returns a formatted date.
  * @param date - date in the format of 'YYYY-MM-DD'
  */
-export function formatDate(date: string, format: DateFormat = 'point-separated-d-m-yyyy'): string {
+export function formatDate(
+    date: string,
+    format: DateFormat = 'point-separated-d-m-yyyy'
+): string {
     if (date?.includes('+')) {
         console.warn(
             'Date contains timezone information, use formatDateLocalized instead'
@@ -142,11 +144,18 @@ export function formatDate(date: string, format: DateFormat = 'point-separated-d
  * Returns a formatted date.
  * @param date - date in the format of 'YYYY-MM-DD'
  */
-export function formatDateLocalized(date: string, format: DateFormat = 'point-separated-d-m-yyyy'): string {
+export function formatDateLocalized(
+    date: string,
+    format: DateFormat = 'point-separated-d-m-yyyy'
+): string {
     return getLocalizedDayJs(date).format(dateFormatMap[format]);
 }
 
-export function formatDateTimeLocalized(date: string, dateFormat?: DateFormat, timeFormat?: TimeFormat): string {
+export function formatDateTimeLocalized(
+    date: string,
+    dateFormat?: DateFormat,
+    timeFormat?: TimeFormat
+): string {
     const format = `${dateFormatMap[dateFormat ?? 'point-separated-d-m-yyyy']} ${timeFormat === '12-hours' ? 'hh:mm A' : 'HH:mm'}`;
     return getLocalizedDayJs(date).format(format);
 }
@@ -172,7 +181,11 @@ export function formatWeekday(date: string) {
     return dayjs(date).format('dddd');
 }
 
-export function formatStartEnd(start: string, end: string | null, timeFormat: TimeFormat = '24-hours') {
+export function formatStartEnd(
+    start: string,
+    end: string | null,
+    timeFormat: TimeFormat = '24-hours'
+) {
     if (end) {
         return `${formatTime(start, timeFormat)} - ${formatTime(end, timeFormat)}`;
     } else {

From f1cce796785a23ae75bf37a81a1033648909fedd Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 20 May 2025 14:56:45 +0200
Subject: [PATCH 3/7] improve DatePicker sizing in report create modal

---
 .../Common/Report/ReportCreateModal.vue       |  4 ++--
 .../Common/Report/ReportEditModal.vue         |  4 +++-
 .../js/packages/ui/src/Input/DatePicker.vue   | 19 +++++++++++++------
 .../ui/src/Input/TimeRangeSelector.vue        |  2 ++
 .../ui/src/TimeEntry/TimeEntryCreateModal.vue |  2 ++
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/resources/js/Components/Common/Report/ReportCreateModal.vue b/resources/js/Components/Common/Report/ReportCreateModal.vue
index 085b7989..1d4ecd7b 100644
--- a/resources/js/Components/Common/Report/ReportCreateModal.vue
+++ b/resources/js/Components/Common/Report/ReportCreateModal.vue
@@ -103,13 +103,13 @@ async function submit() {
                     <div
                         v-if="report.is_public"
                         class="flex items-center space-x-4">
-                        <div>
+                        <div class="w-full">
                             <InputLabel for="public_until" value="Expires at" />
                             <div class="text-text-tertiary font-medium">
                                 (optional)
                             </div>
                         </div>
-                        <DatePicker id="public_until"></DatePicker>
+                        <DatePicker id="public_until" size="input"></DatePicker>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/Components/Common/Report/ReportEditModal.vue b/resources/js/Components/Common/Report/ReportEditModal.vue
index 6d9b161d..3224fd55 100644
--- a/resources/js/Components/Common/Report/ReportEditModal.vue
+++ b/resources/js/Components/Common/Report/ReportEditModal.vue
@@ -118,7 +118,9 @@ async function submit() {
                         v-if="report.is_public"
                         class="flex items-center space-x-4">
                         <InputLabel for="public_until" value="Expires at" />
-                        <DatePicker id="public_until"></DatePicker>
+                        <DatePicker 
+                        id="public_until"
+                        size="input"></DatePicker>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/packages/ui/src/Input/DatePicker.vue b/resources/js/packages/ui/src/Input/DatePicker.vue
index 4d418512..7259e0e7 100644
--- a/resources/js/packages/ui/src/Input/DatePicker.vue
+++ b/resources/js/packages/ui/src/Input/DatePicker.vue
@@ -4,7 +4,7 @@ import {
     PopoverContent,
     PopoverTrigger,
 } from '@/Components/ui/popover';
-import { Button } from '@/Components/ui/button';
+import { Button, type ButtonVariants } from '@/Components/ui/button';
 import { Calendar } from '@/Components/ui/calendar';
 import { CalendarIcon } from 'lucide-vue-next';
 import { formatDateLocalized } from '@/packages/ui/src/utils/time';
@@ -16,6 +16,7 @@ import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
 const props = defineProps<{
     class?: string;
     tabindex?: string;
+    size: ButtonVariants['size'];
 }>();
 
 const model = defineModel<string | null>();
@@ -52,14 +53,21 @@ const organization = inject<ComputedRef<Organization>>('organization');
         <PopoverTrigger as-child>
             <Button
                 variant="input"
-                size="sm"
+                :size="size"
                 :class="[
-                    'w-full gap-1.5 justify-center text-left font-normal',
+                    size === 'sm' ? 'gap-1.5' : 'gap-2',
+                    'w-full justify-center text-left font-normal',
                     !model && 'text-muted-foreground',
                     props.class,
                 ]"
                 :tabindex="tabindex">
-                <CalendarIcon class="h-3 w-3" />
+                <CalendarIcon
+:class="[
+                    size === 'xs' ? 'h-3 w-3' : 
+                    size === 'sm' ? 'h-3 w-3' : 
+                    size === 'lg' ? 'h-4.5 w-4.5' : 
+                    'h-4 w-4'
+                ]" />
                 <span class="text-center">
                     {{
                         model
@@ -77,8 +85,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
                 mode="single"
                 :model-value="date"
                 :initial-focus="true"
-                @update:model-value="handleChange"
-                />
+                @update:model-value="handleChange" />
         </PopoverContent>
     </Popover>
 </template>
diff --git a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
index a6e4ffce..4e0f2bd8 100644
--- a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
+++ b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
@@ -84,6 +84,7 @@ watch(focused, (newValue, oldValue) => {
         <div class="px-2 pt-2">
             <DatePicker
                 v-model="tempStart"
+                size="sm"
                 class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
                 @changed="updateTimeEntry"></DatePicker>
         </div>
@@ -91,6 +92,7 @@ watch(focused, (newValue, oldValue) => {
             <DatePicker
                 v-if="tempEnd !== null"
                 v-model="tempEnd"
+                size="sm"
                 class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
                 @changed="updateTimeEntry"></DatePicker>
         </div>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
index ecce0a0e..4a9d61d1 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
@@ -257,9 +257,11 @@ type BillableOption = {
                     </div>
                     <DatePicker
                         v-model="localStart"
+                        size="sm"
                         class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                     <DatePicker
                         v-model="localEnd"
+                        size="sm"
                         class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                 </div>
             </div>

From 4635fec016706e989f0dd7c164eb858c9d732e21 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 20 May 2025 14:59:44 +0200
Subject: [PATCH 4/7] adapt test to respect new formatting for
 hours-minutes-colon-seperated

---
 e2e/organization.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/e2e/organization.spec.ts b/e2e/organization.spec.ts
index ebb4a539..3b1e046e 100644
--- a/e2e/organization.spec.ts
+++ b/e2e/organization.spec.ts
@@ -230,7 +230,9 @@ test('test that format settings are reflected in the dashboard', async ({
     await expect(page.getByText('0.00€')).toBeVisible();
 
     // check that 00:00 is displayed
-    await expect(page.getByText('0:00', { exact: true }).nth(0)).toBeVisible();
+    await expect(
+        page.getByText('0:00 h', { exact: true }).nth(0)
+    ).toBeVisible();
     // check that 0h 00min is not displayed
     await expect(
         page.getByText('0h 00min', { exact: true }).nth(0)

From 915204f7a696c4ee0ff9325de49e7bcc910ef316 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 20 May 2025 16:06:00 +0200
Subject: [PATCH 5/7] fix that timetracker duration popover instantly closes on
 click if another element was focused before

---
 .../ui/src/TimeTracker/TimeTrackerRangeSelector.vue       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
index c241e3da..acbb26b3 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
@@ -101,15 +101,19 @@ const startTime = computed(() => {
 const inputField = ref<HTMLInputElement | null>(null);
 
 const timeRangeSelector = ref<HTMLElement | null>(null);
+const isMouseDown = ref(false);
 
 function openModalOnTab(e: FocusEvent) {
     // check if the source is inside the dropdown
+
+    console.log(e.target);
     const source = e.relatedTarget as HTMLElement;
     if (
         source &&
         window.document.body
             .querySelector<HTMLElement>('#app')
-            ?.contains(source)
+            ?.contains(source) &&
+        !isMouseDown.value
     ) {
         open.value = true;
     }
@@ -153,6 +157,8 @@ function closeAndFocusInput() {
                     @keydown.exact.tab="focusNextElement"
                     @keydown.exact.shift.tab="open = false"
                     @blur="updateTimerAndStartLiveTimerUpdate"
+                    @mousedown="isMouseDown = true"
+                    @mouseup="isMouseDown = false"
                     @keydown.enter="onTimeEntryEnterPress" />
             </template>
             <template #content>

From a45c8a89f69c5cf046636af49b2f4d809a31fc77 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 24 Jun 2025 16:57:12 +0200
Subject: [PATCH 6/7] fix datepicker for report create/update, fix public_until
 update

---
 .../Controllers/Api/V1/ReportController.php   |  2 ++
 .../Common/Report/ReportCreateModal.vue       | 12 ++++++--
 .../Common/Report/ReportEditModal.vue         | 17 ++++++++---
 .../js/packages/ui/src/Input/DatePicker.vue   | 19 +++++++-----
 .../Endpoint/Api/V1/ReportEndpointTest.php    | 29 +++++++++++++++++++
 5 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/app/Http/Controllers/Api/V1/ReportController.php b/app/Http/Controllers/Api/V1/ReportController.php
index 46fe7208..5a53fb64 100644
--- a/app/Http/Controllers/Api/V1/ReportController.php
+++ b/app/Http/Controllers/Api/V1/ReportController.php
@@ -148,6 +148,8 @@ public function update(Organization $organization, Report $report, ReportUpdateR
                 $report->share_secret = null;
                 $report->public_until = null;
             }
+        } elseif ($report->is_public && $request->has('public_until')) {
+            $report->public_until = $request->getPublicUntil();
         }
         $report->save();
 
diff --git a/resources/js/Components/Common/Report/ReportCreateModal.vue b/resources/js/Components/Common/Report/ReportCreateModal.vue
index 1d4ecd7b..c21f1693 100644
--- a/resources/js/Components/Common/Report/ReportCreateModal.vue
+++ b/resources/js/Components/Common/Report/ReportCreateModal.vue
@@ -15,6 +15,7 @@ import { api } from '@/packages/api/src';
 import { Checkbox } from '@/packages/ui/src';
 import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
 import { useNotificationsStore } from '@/utils/notification';
+import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -47,10 +48,14 @@ const report = ref({
 const { handleApiRequestNotifications } = useNotificationsStore();
 
 async function submit() {
+    const { public_until, ...reportProperties } = report.value;
     await handleApiRequestNotifications(
         () =>
             createReportMutation.mutateAsync({
-                ...report.value,
+                ...reportProperties,
+                public_until: public_until
+                    ? getLocalizedDayJs(public_until).utc().format()
+                    : null,
                 properties: { ...props.properties },
             }),
         'Success',
@@ -109,7 +114,10 @@ async function submit() {
                                 (optional)
                             </div>
                         </div>
-                        <DatePicker id="public_until" size="input"></DatePicker>
+                        <DatePicker
+                            id="public_until"
+                            v-model="report.public_until"
+                            size="input"></DatePicker>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/Components/Common/Report/ReportEditModal.vue b/resources/js/Components/Common/Report/ReportEditModal.vue
index 3224fd55..cbef9692 100644
--- a/resources/js/Components/Common/Report/ReportEditModal.vue
+++ b/resources/js/Components/Common/Report/ReportEditModal.vue
@@ -13,6 +13,7 @@ import { Checkbox } from '@/packages/ui/src';
 import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
 import { useNotificationsStore } from '@/utils/notification';
 import type { Report } from '@/packages/api/src';
+import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -64,8 +65,15 @@ watch(
 const { handleApiRequestNotifications } = useNotificationsStore();
 
 async function submit() {
+    const { public_until, ...reportProperties } = report.value;
     await handleApiRequestNotifications(
-        () => updateReportMutation.mutateAsync(report.value),
+        () =>
+            updateReportMutation.mutateAsync({
+                ...reportProperties,
+                public_until: public_until
+                    ? getLocalizedDayJs(public_until).utc().format()
+                    : null,
+            }),
         'Success',
         'Error',
         () => {
@@ -118,9 +126,10 @@ async function submit() {
                         v-if="report.is_public"
                         class="flex items-center space-x-4">
                         <InputLabel for="public_until" value="Expires at" />
-                        <DatePicker 
-                        id="public_until"
-                        size="input"></DatePicker>
+                        <DatePicker
+                            id="public_until"
+                            v-model="report.public_until"
+                            size="input"></DatePicker>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/packages/ui/src/Input/DatePicker.vue b/resources/js/packages/ui/src/Input/DatePicker.vue
index 7259e0e7..1ea265b5 100644
--- a/resources/js/packages/ui/src/Input/DatePicker.vue
+++ b/resources/js/packages/ui/src/Input/DatePicker.vue
@@ -30,7 +30,9 @@ const handleChange = (date: DateValue | undefined) => {
         return;
     }
 
-    const dayjs = getLocalizedDayJs(model.value);
+    const dayjs = model.value
+        ? getLocalizedDayJs(model.value)
+        : getLocalizedDayJs();
     model.value = dayjs
         .year(date.year)
         .month(date.month - 1) // CalendarDate uses 1-based months
@@ -62,12 +64,15 @@ const organization = inject<ComputedRef<Organization>>('organization');
                 ]"
                 :tabindex="tabindex">
                 <CalendarIcon
-:class="[
-                    size === 'xs' ? 'h-3 w-3' : 
-                    size === 'sm' ? 'h-3 w-3' : 
-                    size === 'lg' ? 'h-4.5 w-4.5' : 
-                    'h-4 w-4'
-                ]" />
+                    :class="[
+                        size === 'xs'
+                            ? 'h-3 w-3'
+                            : size === 'sm'
+                              ? 'h-3 w-3'
+                              : size === 'lg'
+                                ? 'h-4.5 w-4.5'
+                                : 'h-4 w-4',
+                    ]" />
                 <span class="text-center">
                     {{
                         model
diff --git a/tests/Unit/Endpoint/Api/V1/ReportEndpointTest.php b/tests/Unit/Endpoint/Api/V1/ReportEndpointTest.php
index 0239e050..8c54c346 100644
--- a/tests/Unit/Endpoint/Api/V1/ReportEndpointTest.php
+++ b/tests/Unit/Endpoint/Api/V1/ReportEndpointTest.php
@@ -340,6 +340,35 @@ public function test_update_endpoint_does_not_change_the_secret_of_a_public_repo
         );
     }
 
+    public function test_update_endpoint_can_update_public_until_without_changing_secret(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'reports:update',
+        ]);
+        $report = Report::factory()->public()->forOrganization($data->organization)->create();
+        $secret = $report->share_secret;
+        $newPublicUntil = Carbon::now()->addDays(30)->toIso8601ZuluString();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->putJson(route('api.v1.reports.update', [$data->organization->getKey(), $report->getKey()]), [
+            'public_until' => $newPublicUntil,
+        ]);
+
+        // Assert
+        $report->refresh();
+        $this->assertTrue($report->is_public);
+        $this->assertSame($secret, $report->share_secret);
+        $this->assertSame($newPublicUntil, $report->public_until->toIso8601ZuluString());
+        $response->assertStatus(200);
+        $response->assertJson(fn (AssertableJson $json) => $json
+            ->has('data')
+            ->where('data.is_public', true)
+            ->where('data.shareable_link', $report->getShareableLink())
+        );
+    }
+
     public function test_update_endpoint_can_update_the_report_all_properties_set(): void
     {
         // Arrange

From f79d995fddcb9215255983d9bee00ad16fc65844 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 24 Jun 2025 18:10:39 +0200
Subject: [PATCH 7/7] make sure empty duration input updates v-model to null,
 fixes #816

---
 e2e/projects.spec.ts                          | 45 ++++++++++++++++++-
 .../packages/ui/src/EstimatedTimeSection.vue  |  3 +-
 .../packages/ui/src/Input/DurationInput.vue   |  7 +++
 .../js/packages/ui/src/Input/TextInput.vue    |  2 +
 4 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/e2e/projects.spec.ts b/e2e/projects.spec.ts
index 156d66e6..d30ac382 100644
--- a/e2e/projects.spec.ts
+++ b/e2e/projects.spec.ts
@@ -102,7 +102,7 @@ test('test that updating billable rate works with existing time entries', async
 
     await page.getByRole('row').first().getByRole('button').click();
     await page.getByRole('menuitem').getByText('Edit').first().click();
-        await page.getByText('Non-Billable').click();
+    await page.getByText('Non-Billable').click();
     await page.getByText('Custom Rate').click();
     await page
         .getByPlaceholder('Billable Rate')
@@ -136,6 +136,49 @@ test('test that updating billable rate works with existing time entries', async
     ).toBeVisible();
 });
 
+test('test that creating and updating project time estimate works', async ({ page }) => {
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
+    const timeEstimate = '10';
+    
+    await goToProjectsOverview(page);
+    await page.getByRole('button', { name: 'Create Project' }).click();
+    await page.getByLabel('Project Name').fill(newProjectName);
+    await page.getByLabel('Time Estimated').fill(timeEstimate);
+
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Project' }).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201 &&
+                (await response.json()).data.estimated_time === parseInt(timeEstimate) * 60 * 60
+        ),
+    ]);
+
+    // Check that time estimate is displayed in the projects table
+    await expect(page.getByTestId('project_table')).toContainText(timeEstimate + 'h');
+
+    // Edit project to remove time estimate
+    await page.getByRole('row').first().getByRole('button').click();
+    await page.getByRole('menuitem').getByText('Edit').first().click();
+    await page.getByLabel('Time Estimated').fill('');
+    
+    await Promise.all([
+        page.getByRole('button', { name: 'Update Project' }).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.estimated_time === null
+        ),
+    ]);
+
+    // Check that time estimate is no longer displayed
+    await expect(page.getByTestId('project_table')).not.toContainText(timeEstimate + 'h');
+});
+
 // Create new project with new Client
 
 // Create new project with existing Client
diff --git a/resources/js/packages/ui/src/EstimatedTimeSection.vue b/resources/js/packages/ui/src/EstimatedTimeSection.vue
index 1e59dffa..9020c728 100644
--- a/resources/js/packages/ui/src/EstimatedTimeSection.vue
+++ b/resources/js/packages/ui/src/EstimatedTimeSection.vue
@@ -11,9 +11,10 @@ const emit = defineEmits(['submit']);
     <div class="pt-6">
         <div class="flex items-center space-x-1 mb-2">
             <ClockIcon class="text-text-quaternary w-4"></ClockIcon>
-            <InputLabel for="billable" value="Time Estimated" />
+            <InputLabel for="time-estimated" value="Time Estimated" />
         </div>
         <DurationInput
+            id="time-estimated"
             v-model="model"
             class="max-w-[150px]"
             @submit="emit('submit')"></DurationInput>
diff --git a/resources/js/packages/ui/src/Input/DurationInput.vue b/resources/js/packages/ui/src/Input/DurationInput.vue
index 184e303a..efafd53d 100644
--- a/resources/js/packages/ui/src/Input/DurationInput.vue
+++ b/resources/js/packages/ui/src/Input/DurationInput.vue
@@ -2,6 +2,10 @@
 import { computed, ref } from 'vue';
 import { TextInput } from '@/packages/ui/src';
 
+defineProps<{
+    id?: string;
+}>();
+
 const model = defineModel<number | null>({
     default: null,
 });
@@ -16,6 +20,8 @@ function updateDuration() {
     const hours = parseInt(temporaryCustomTimerEntry.value);
     if (!isNaN(hours)) {
         model.value = hours * 60 * 60;
+    } else {
+        model.value = null;
     }
     temporaryCustomTimerEntry.value = '';
 }
@@ -54,6 +60,7 @@ function updateAndSubmit() {
 <template>
     <div class="relative">
         <TextInput
+            :id="id"
             v-model="currentTime"
             class="w-full overflow-hidden pr-14"
             placeholder="0"
diff --git a/resources/js/packages/ui/src/Input/TextInput.vue b/resources/js/packages/ui/src/Input/TextInput.vue
index df229433..7acb26ba 100644
--- a/resources/js/packages/ui/src/Input/TextInput.vue
+++ b/resources/js/packages/ui/src/Input/TextInput.vue
@@ -5,6 +5,7 @@ import { twMerge } from 'tailwind-merge';
 const props = defineProps<{
     name?: string;
     class?: string;
+    id?: string;
 }>();
 
 const input = ref<HTMLInputElement | null>(null);
@@ -21,6 +22,7 @@ const model = defineModel();
 
 <template>
     <input
+        :id="id"
         ref="input"
         v-model="model"
         :class="