add break time entries and simplified time tracker ui

resources/js/Pages/Calendar.vue

@@ -31,6 +31,9 @@ const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
 const calendarStart = ref<Dayjs | undefined>(undefined);
 const calendarEnd = ref<Dayjs | undefined>(undefined);
 
+// Optional deep link (e.g. "Fix in calendar") that opens the calendar on a specific day
+const initialDate = new URLSearchParams(window.location.search).get('date');
+
 // Test-injectable activity periods (for E2E testing).
 // These hooks are no-ops in production — they only take effect when test code
 // explicitly sets window globals, so they are safe to ship.
@@ -128,6 +131,7 @@ function onRefresh() {
             :enable-estimated-time="isAllowedToPerformPremiumAction()"
             :currency="getOrganizationCurrencyString()"
             :can-create-project="canCreateProjects()"
+            :initial-date="initialDate"
             :organization-billable-rate="organization?.billable_rate ?? null"
             :create-time-entry="createTimeEntry"
             :update-time-entry="updateTimeEntry"

resources/js/Pages/ReportingDetailed.vue

@@ -74,6 +74,7 @@ const selectedTasks = ref<string[]>([]);
 const selectedClients = ref<string[]>([]);
 const tagMatchType = ref<TagMatchType>('contains');
 const billable = ref<'true' | 'false' | null>(null);
+const entryType = ref<'work' | 'break' | null>('work');
 const roundingEnabled = ref<boolean>(false);
 const roundingType = ref<TimeEntryRoundingType>('nearest');
 const roundingMinutes = ref<number>(15);
@@ -106,6 +107,7 @@ function getFilterAttributes() {
         tag_ids: selectedTags.value.length > 0 ? selectedTags.value : undefined,
         tag_match_type: selectedTags.value.length > 0 ? tagMatchType.value : undefined,
         billable: billable.value !== null ? billable.value : undefined,
+        type: entryType.value !== null ? entryType.value : undefined,
         rounding_type: roundingEnabled.value ? roundingType.value : undefined,
         rounding_minutes: roundingEnabled.value ? roundingMinutes.value : undefined,
     };
@@ -329,6 +331,7 @@ async function downloadExport(format: ExportFormat) {
             v-model:selected-tags="selectedTags"
             v-model:tag-match-type="tagMatchType"
             v-model:billable="billable"
+            v-model:entry-type="entryType"
             v-model:rounding-enabled="roundingEnabled"
             v-model:rounding-type="roundingType"
             v-model:rounding-minutes="roundingMinutes"

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

@@ -17,15 +17,18 @@ const queryClient = useQueryClient();
 const form = ref<{
     prevent_overlapping_time_entries: boolean;
     employees_can_manage_tasks: boolean;
+    breaks_enabled: boolean;
 }>({
     prevent_overlapping_time_entries: false,
     employees_can_manage_tasks: false,
+    breaks_enabled: false,
 });
 
 onMounted(async () => {
     form.value.prevent_overlapping_time_entries =
         organization.value?.prevent_overlapping_time_entries ?? false;
     form.value.employees_can_manage_tasks = organization.value?.employees_can_manage_tasks ?? false;
+    form.value.breaks_enabled = organization.value?.breaks_enabled ?? false;
 });
 
 const mutation = useMutation({
@@ -39,6 +42,7 @@ async function submit() {
     await mutation.mutateAsync({
         prevent_overlapping_time_entries: form.value.prevent_overlapping_time_entries,
         employees_can_manage_tasks: form.value.employees_can_manage_tasks,
+        breaks_enabled: form.value.breaks_enabled,
     });
 }
 </script>
@@ -69,6 +73,10 @@ async function submit() {
                         >Allow Employees to manage tasks</FieldLabel
                     >
                 </Field>
+                <Field orientation="horizontal">
+                    <Checkbox id="breaksEnabled" v-model:checked="form.breaks_enabled" />
+                    <FieldLabel for="breaksEnabled">Allow tracking breaks</FieldLabel>
+                </Field>
             </div>
         </template>
 

resources/js/Pages/Time.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AppLayout from '@/Layouts/AppLayout.vue';
 import TimeTracker from '@/Components/TimeTracker.vue';
+import { router } from '@inertiajs/vue3';
 import { computed, ref, watch } from 'vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import { storeToRefs } from 'pinia';
@@ -102,6 +103,11 @@ function deleteSelected() {
     deleteTimeEntries(selectedTimeEntries.value);
     selectedTimeEntries.value = [];
 }
+
+// SPA-navigate the calendar to a break's day so its placement can be fixed there.
+function goToCalendarDay(date: string) {
+    router.visit(`/calendar?date=${date}`);
+}
 </script>
 
 <template>
@@ -153,6 +159,7 @@ function deleteSelected() {
             :currency="getOrganizationCurrencyString()"
             :time-entries="timeEntries"
             :group-similar-time-entries="groupSimilarTimeEntriesSetting"
+            :fix-in-calendar="goToCalendarDay"
             :tags="tags"></TimeEntryGroupedTable>
         <div v-if="isPending" class="flex justify-center items-center py-12">
             <LoadingSpinner></LoadingSpinner>

resources/js/Pages/Timesheet.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useBreaksEnabled } from '@/packages/ui/src/utils/useBreaksEnabled';
 import AppLayout from '@/Layouts/AppLayout.vue';
 import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
 import TimesheetHeader from '@/Components/Timesheet/TimesheetHeader.vue';
 import TimesheetGrid from '@/Components/Timesheet/TimesheetGrid.vue';
 import TimesheetFooterActions from '@/Components/Timesheet/TimesheetFooterActions.vue';
 import RemoveRowDialog from '@/Components/Timesheet/RemoveRowDialog.vue';
+import BreakPlacementModal from '@/Components/Timesheet/BreakPlacementModal.vue';
 import { useTimesheetQuery } from '@/utils/useTimesheetQuery';
 import { useTimesheetGrid } from '@/utils/useTimesheetGrid';
 import { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
@@ -22,7 +24,12 @@ import { getCurrentOrganizationId } from '@/utils/useUser';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { canCreateProjects } from '@/utils/permissions';
-import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
+import {
+    formatHumanReadableDuration,
+    getLocalizedDateFromTimestamp,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
+import { getBreakPlacementHint } from '@/packages/ui/src/utils/breakPlacement';
 import { useTimesheetWeek } from '@/utils/timesheet/useTimesheetWeek';
 import { useTimesheetCellMutations } from '@/utils/timesheet/useTimesheetCellMutations';
 import { useTimesheetRowMutations } from '@/utils/timesheet/useTimesheetRowMutations';
@@ -45,8 +52,17 @@ const {
 } = useTimesheetWeek();
 
 // ── Data fetching ─────────────────────────────────────────────────
+// The query fetches one padding day on each side of the week so that entries
+// crossing midnight at the week edges are known to the break-placement solver.
 const { data, isPending } = useTimesheetQuery(weekStart, weekEnd);
-const timeEntries = computed(() => data.value?.data ?? []);
+const allTimeEntries = computed(() => data.value?.data ?? []);
+// The grid and week-scoped features only see entries starting in the visible week.
+const timeEntries = computed(() => {
+    const weekDaySet = new Set(weekDays.value);
+    return allTimeEntries.value.filter((entry) =>
+        weekDaySet.has(getLocalizedDateFromTimestamp(entry.start))
+    );
+});
 
 const { projects } = useProjectsQuery();
 const { tasks } = useTasksQuery();
@@ -56,19 +72,31 @@ const { now: currentTimerNow } = storeToRefs(useCurrentTimeEntryStore());
 
 const mutations = useTimeEntriesMutations();
 
+const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
+const breaksEnabled = useBreaksEnabled(organization);
+
 // ── Grid computation ──────────────────────────────────────────────
-const { rows, dayTotals, grandTotal, addSlot, removeSlot, updateSlot, clearSlots } =
-    useTimesheetGrid(timeEntries, weekDays, projects, tasks, currentTimerNow);
+const {
+    rows,
+    dayTotals,
+    grandTotal,
+    breakDayTotals,
+    breakGrandTotal,
+    addSlot,
+    removeSlot,
+    updateSlot,
+    clearSlots,
+} = useTimesheetGrid(timeEntries, weekDays, projects, tasks, currentTimerNow, breaksEnabled);
 
 // Wipe slots on week navigation so the new week starts fresh — the
 // grid's watcher will reseed from the newly fetched entries.
-watch(weekStart, () => clearSlots());
+// flush: 'sync' so the wipe happens the moment weekStart is assigned, BEFORE
+// the same flush recomputes `timeEntries` (it depends on weekDays) and lets
+// the grid seed the new week — otherwise a cached (prefetched) week seeds
+// first, gets wiped here, and nothing re-triggers the seeding afterwards.
+watch(weekStart, () => clearSlots(), { flush: 'sync' });
 
 // ── Formatters ────────────────────────────────────────────────────
-// Pull number/interval format off the org via its query rather than
-// inject('organization'), which is undefined during the page's setup
-// (AppLayout provides it later in the lifecycle).
-const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
 const intervalFormat = computed(() => organization.value?.interval_format ?? 'hours-minutes');
 const numberFormat = computed(() => organization.value?.number_format ?? 'point');
 
@@ -90,12 +118,28 @@ const weekRangeDisplay = computed(() => {
 });
 
 // ── Cell / row mutation handlers ──────────────────────────────────
-const { handleCellUpdate, cellStatus, cellPendingSeconds } = useTimesheetCellMutations(
-    weekDays,
-    timeEntries,
-    rows,
-    removeSlot
-);
+const {
+    handleCellUpdate,
+    cellStatus,
+    cellPendingSeconds,
+    breakPlacementRequest,
+    applyBreakPlacement,
+    dismissBreakPlacement,
+} = useTimesheetCellMutations(weekDays, allTimeEntries, rows, removeSlot);
+
+// Local dates (YYYY-MM-DD) that have a misplaced break. There is only one break
+// row, so a flat set is enough — its cells show a warning for dates in the set.
+const misplacedBreakDates = computed<Set<string>>(() => {
+    const dates = new Set<string>();
+    for (const entry of timeEntries.value) {
+        if (entry.type !== 'break') continue;
+        // Hint against the padded list so work just across midnight counts.
+        if (getBreakPlacementHint(entry, allTimeEntries.value)?.misplaced) {
+            dates.add(getLocalizedDayJs(entry.start).format('YYYY-MM-DD'));
+        }
+    }
+    return dates;
+});
 
 const { handleRowIdentityChange, handleAddRow } = useTimesheetRowMutations(
     mutations,
@@ -125,7 +169,8 @@ const { isCopyingLastWeek, copyLastWeekRows, copyLastWeekWithTime } = useCopyLas
     weekDays,
     rows,
     timeEntries,
-    addSlot
+    addSlot,
+    breaksEnabled
 );
 
 // ── Inline creation helpers (passed to TimesheetRow) ──────────────
@@ -161,6 +206,8 @@ async function createTag(name: string): Promise<Tag | undefined> {
                 :today-date="todayDate"
                 :day-totals="dayTotals"
                 :week-total-formatted="weekTotalFormatted"
+                :break-day-totals="breakDayTotals"
+                :break-grand-total="breakGrandTotal"
                 :projects="projects"
                 :tasks="tasks"
                 :clients="clients"
@@ -174,6 +221,7 @@ async function createTag(name: string): Promise<Tag | undefined> {
                 :format-duration="formatDuration"
                 :cell-statuses="cellStatus"
                 :cell-pending-seconds="cellPendingSeconds"
+                :misplaced-break-dates="misplacedBreakDates"
                 @remove-row="handleRemoveRow"
                 @cell-update="handleCellUpdate"
                 @project-task-change="
@@ -199,5 +247,10 @@ async function createTag(name: string): Promise<Tag | undefined> {
             :entry-count="deleteRowEntryCount"
             :project-name="deleteRowProjectName"
             @confirm="confirmDeleteRow" />
+
+        <BreakPlacementModal
+            :request="breakPlacementRequest"
+            :apply="applyBreakPlacement"
+            @cancel="dismissBreakPlacement" />
     </AppLayout>
 </template>