fix timetracker timepicker when no timer is started yet

resources/js/Components/Common/TimePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
-import { getLocalizedDayJs } from '@/utils/time';
+import { getDayJsInstance, getLocalizedDayJs } from '@/utils/time';
 import { twMerge } from 'tailwind-merge';
 
 const model = defineModel<string | null>({
@@ -47,6 +47,11 @@ function updateHours(event: Event) {
 }
 
 const emit = defineEmits(['changed']);
+onMounted(() => {
+    if (!model.value) {
+        model.value = getDayJsInstance().utc().format();
+    }
+});
 </script>
 
 <template>

resources/js/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue

@@ -8,7 +8,8 @@ import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { storeToRefs } from 'pinia';
 import { getDayJsInstance } from '@/utils/time';
 const currentTimeEntryStore = useCurrentTimeEntryStore();
-const { startLiveTimer, stopLiveTimer, updateTimer } = currentTimeEntryStore;
+const { startLiveTimer, stopLiveTimer, updateTimer, startTimer } =
+    currentTimeEntryStore;
 const { currentTimeEntry, now } = storeToRefs(currentTimeEntryStore);
 
 defineEmits(['changed']);
@@ -108,10 +109,14 @@ function parseHHMM(value: string): string[] | null {
 const temporaryCustomTimerEntry = ref<string>('');
 
 async function updateTimeRange(newStart: string) {
+    // prohibit updates in the future
     if (getDayJsInstance()(newStart).isBefore(getDayJsInstance()())) {
-        // prohibit updates in the future
         currentTimeEntry.value.start = newStart;
-        await updateTimer();
+        if (currentTimeEntry.value.id) {
+            await updateTimer();
+        } else {
+            await startTimer();
+        }
     }
 }
 </script>