Preserve the selected start when entering manual time entry duration

resources/js/packages/ui/src/Input/DurationHumanInput.test.ts

@@ -0,0 +1,54 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { computed } from 'vue';
+import DurationHumanInput from './DurationHumanInput.vue';
+
+enableAutoUnmount(afterEach);
+
+function mountInput(props: { start: string; end: string; anchor?: 'start' | 'end' }) {
+    return mount(DurationHumanInput, {
+        props,
+        global: {
+            provide: {
+                organization: computed(() => ({ interval_format: 'hours-minutes' })),
+            },
+        },
+    });
+}
+
+describe('DurationHumanInput', () => {
+    it.each(['blur', 'keydown.enter'])(
+        'preserves the end by default when applying duration via %s',
+        async (event) => {
+            const wrapper = mountInput({
+                start: '2026-10-26T08:00:00Z',
+                end: '2026-10-26T09:00:00Z',
+            });
+
+            await wrapper.get('input').setValue('8h');
+            await wrapper.get('input').trigger(event);
+
+            expect(wrapper.emitted('update:start')).toEqual([['2026-10-26T01:00:00Z']]);
+            expect(wrapper.emitted('update:end')).toBeUndefined();
+        }
+    );
+
+    it.each([
+        ['same day', '2026-10-26T09:00:00+01:00', '2026-10-26T16:00:00Z'],
+        ['overnight', '2026-10-26T22:00:00+01:00', '2026-10-27T05:00:00Z'],
+        ['spring DST change', '2026-03-29T00:00:00+01:00', '2026-03-29T07:00:00Z'],
+        ['autumn DST change', '2026-10-25T00:00:00+02:00', '2026-10-25T06:00:00Z'],
+    ])('adds 8 elapsed hours to the fixed start: %s', async (_, start, expectedEnd) => {
+        const wrapper = mountInput({
+            start,
+            end: '2026-10-26T09:00:00Z',
+            anchor: 'start',
+        });
+
+        await wrapper.get('input').setValue('8h');
+        await wrapper.get('input').trigger('blur');
+
+        expect(wrapper.emitted('update:end')).toEqual([[expectedEnd]]);
+        expect(wrapper.emitted('update:start')).toBeUndefined();
+    });
+});

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

@@ -30,15 +30,23 @@ function updateDuration() {
         organization?.value?.interval_format === 'decimal' ? 'hours' : 'minutes'
     );
     if (seconds && seconds > 0) {
-        const newStartDate = getDayJsInstance()(end.value).subtract(seconds, 's');
-        start.value = newStartDate.utc().format();
+        if (props.anchor === 'start') {
+            end.value = getDayJsInstance()(start.value).add(seconds, 's').utc().format();
+        } else {
+            start.value = getDayJsInstance()(end.value).subtract(seconds, 's').utc().format();
+        }
     }
     updateTimeEntryInputValue();
 }
 
-const props = defineProps<{
-    class?: string;
-}>();
+const props = withDefaults(
+    defineProps<{
+        class?: string;
+        // The endpoint to keep fixed when the duration changes.
+        anchor?: 'start' | 'end';
+    }>(),
+    { anchor: 'end', class: undefined }
+);
 
 watch([start, end], updateTimeEntryInputValue);
 onMounted(() => updateTimeEntryInputValue());

resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.test.ts

@@ -0,0 +1,95 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils';
+import { afterEach, assert, beforeEach, describe, expect, it, vi } from 'vitest';
+import { computed, nextTick } from 'vue';
+import DatePicker from '../Input/DatePicker.vue';
+import TimeEntryCreateModal from './TimeEntryCreateModal.vue';
+
+enableAutoUnmount(afterEach);
+
+beforeEach(() => {
+    vi.useFakeTimers({ toFake: ['Date'] });
+    vi.setSystemTime(new Date('2026-10-26T08:00:00Z'));
+    vi.mocked(window.getTimezoneSetting).mockReturnValue('Europe/Warsaw');
+});
+
+afterEach(() => {
+    vi.useRealTimers();
+    vi.mocked(window.getTimezoneSetting).mockReturnValue('UTC');
+});
+
+function mountModal() {
+    const createTimeEntry = vi.fn().mockResolvedValue(undefined);
+    const wrapper = mount(TimeEntryCreateModal, {
+        props: {
+            show: true,
+            createTimeEntry,
+            createClient: vi.fn(),
+            createProject: vi.fn(),
+            createTag: vi.fn(),
+            tags: [],
+            projects: [],
+            tasks: [],
+            clients: [],
+            currency: 'PLN',
+            organizationBillableRate: null,
+            canCreateProject: false,
+            enableEstimatedTime: false,
+        },
+        global: {
+            provide: {
+                organization: computed(() => ({ interval_format: 'hours-minutes' })),
+            },
+            stubs: {
+                DialogModal: {
+                    template: '<div><slot name="content" /><slot name="footer" /></div>',
+                },
+                TimeTrackerProjectTaskDropdown: true,
+                TagDropdown: true,
+                Select: true,
+                DatePicker: true,
+            },
+        },
+    });
+    return { wrapper, createTimeEntry };
+}
+
+describe('TimeEntryCreateModal', () => {
+    it.each([false, true])(
+        'keeps yesterday at 09:00 and calculates 17:00 from 8h (end date selected: %s)',
+        async (selectEndDate) => {
+            const { wrapper, createTimeEntry } = mountModal();
+            const datePickers = wrapper.findAllComponents(DatePicker);
+            assert(datePickers[0] && datePickers[1]);
+            datePickers[0].vm.$emit('update:modelValue', '2026-10-25T08:00:00+01:00');
+            await nextTick();
+
+            const [startInput, endInput] = wrapper.findAll<HTMLInputElement>(
+                '[data-testid="time_picker_input"]'
+            );
+            assert(startInput && endInput);
+            await startInput.setValue('09:00');
+            await startInput.trigger('blur');
+
+            if (selectEndDate) {
+                datePickers[1].vm.$emit('update:modelValue', '2026-10-25T09:00:00+01:00');
+                await nextTick();
+            }
+
+            const duration = wrapper.get<HTMLInputElement>('input[name="Duration"]');
+            await duration.setValue('8h');
+            await duration.trigger('blur');
+
+            expect(startInput.element.value).toBe('09:00');
+            expect(endInput.element.value).toBe('17:00');
+            expect(duration.element.value).toBe('8h 00min');
+
+            await wrapper.getComponent({ name: 'PrimaryButton' }).trigger('click');
+            expect(createTimeEntry).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    start: '2026-10-25T08:00:00Z',
+                    end: '2026-10-25T16:00:00Z',
+                })
+            );
+        }
+    );
+});

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

@@ -202,6 +202,7 @@ const billableProxy = computed({
             <TimeRangeFields
                 v-model:start="localStart"
                 v-model:end="localEnd"
+                duration-anchor="start"
                 show-hint
                 class="pt-4"></TimeRangeFields>
         </template>

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

@@ -14,6 +14,7 @@ const end = defineModel<string>('end', { required: true });
 defineProps<{
     showHint?: boolean;
     datePickerSize?: 'sm';
+    durationAnchor?: 'start' | 'end';
 }>();
 
 // Moving the start to or past the end drags the end along, preserving the
@@ -36,6 +37,7 @@ watch(start, (value, oldValue) => {
                 <DurationHumanInput
                     v-model:start="start"
                     v-model:end="end"
+                    :anchor="durationAnchor"
                     name="Duration"></DurationHumanInput>
                 <div v-if="showHint" class="text-sm flex space-x-1">
                     <InformationCircleIcon