move project task count into its own sortable column

Also removes the ring around the project color dot, shrinks it slightly and tightens its spacing to the name.

e2e/calendar.spec.ts

@@ -252,19 +252,19 @@ test('test that calendar page loads and displays time entries', async ({ page, c
 test('test that calendar navigation buttons work', async ({ page }) => {
     await goToCalendar(page);
     await expect(page.locator('.fc')).toBeVisible();
-    await expect(page.getByTestId('calendar-title')).toContainText('This Week');
 
-    // Navigate between named periods.
+    // Click the "next" button to navigate forward
+    await page.getByRole('button', { name: 'Next' }).click();
+    await expect(page.locator('.fc')).toBeVisible();
+
+    // Click the "prev" button to navigate back
     await page.getByRole('button', { name: 'Previous' }).click();
-    await expect(page.getByTestId('calendar-title')).toContainText('Last Week');
-    await page.getByRole('button', { name: 'Next' }).click();
-    await expect(page.getByTestId('calendar-title')).toContainText('This Week');
+    await expect(page.locator('.fc')).toBeVisible();
 
-    // Navigate forward first, then use the range button to return to today.
+    // Navigate forward first, then click today
     await page.getByRole('button', { name: 'Next' }).click();
-    await expect(page.getByTestId('calendar-title')).toContainText('Next Week');
     await page.getByRole('button', { name: 'today' }).click();
-    await expect(page.getByTestId('calendar-title')).toContainText('This Week');
+    await expect(page.locator('.fc')).toBeVisible();
 });
 
 test('test that editing time entry description via calendar modal works', async ({ page, ctx }) => {

e2e/reporting.spec.ts

@@ -18,25 +18,6 @@ import {
 // Each test registers a new user and creates test data via API
 test.describe.configure({ timeout: 30000 });
 
-test('date range picker labels and navigates reporting periods', async ({ page }) => {
-    await goToReporting(page);
-
-    const range = page.getByTestId('date_range_picker_display');
-    const previous = page.getByTestId('date_range_picker_previous');
-    const next = page.getByTestId('date_range_picker_next');
-
-    await expect(range).toContainText('Last 14 Days');
-    await expect(next).toBeDisabled();
-
-    await Promise.all([waitForReportingUpdate(page), previous.click()]);
-    await expect(range).not.toContainText('Last 14 Days');
-
-    // The initial reporting range is still fresh in Vue Query's cache, so returning to it
-    // does not necessarily trigger another aggregate request.
-    await next.click();
-    await expect(range).toContainText('Last 14 Days');
-});
-
 // ──────────────────────────────────────────────────
 // Project Multiselect Dropdown Tests
 // ──────────────────────────────────────────────────

e2e/timesheet.spec.ts

@@ -409,20 +409,20 @@ test('navigating to previous week shows entries from that week', async ({ page,
 test('can navigate forward and return to current week', async ({ page }) => {
     await Promise.all([goToTimesheet(page), waitForTimesheetLoad(page)]);
 
-    // Should show "This Week"
-    await expect(page.getByTestId('timesheet_week_display')).toContainText('This Week');
+    // Should show "This week"
+    await expect(page.getByTestId('timesheet_week_display')).toContainText('This week');
 
     // Go to next week — the text assertions below auto-retry until the
     // header label flips.
     await page.getByTestId('timesheet_next_week').click();
 
-    // Should no longer show "This Week"
-    await expect(page.getByTestId('timesheet_week_display')).not.toContainText('This Week');
+    // Should no longer show "This week"
+    await expect(page.getByTestId('timesheet_week_display')).not.toContainText('This week');
 
     // Go back to this week
     await page.getByTestId('timesheet_week_display').click();
 
-    await expect(page.getByTestId('timesheet_week_display')).toContainText('This Week');
+    await expect(page.getByTestId('timesheet_week_display')).toContainText('This week');
 });
 
 // ──────────────────────────────────────────────────

resources/js/Components/Common/Project/ProjectTable.vue

@@ -10,13 +10,21 @@ import Pagination from '@/packages/ui/src/Pagination.vue';
 import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
 
 export type SortColumn =
-    'name' | 'client_name' | 'spent_time' | 'progress' | 'billable_rate' | 'status' | 'visibility';
+    | 'name'
+    | 'tasks'
+    | 'client_name'
+    | 'spent_time'
+    | 'progress'
+    | 'billable_rate'
+    | 'status'
+    | 'visibility';
 export type { SortDirection } from '@/utils/useSortableTable';
 import { canCreateProjects } from '@/utils/permissions';
 import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
 import { useProjectsStore } from '@/utils/useProjects';
 import { useClientsStore } from '@/utils/useClients';
 import { useClientsQuery } from '@/utils/useClientsQuery';
+import { useTasksQuery } from '@/utils/useTasksQuery';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
@@ -56,6 +64,16 @@ const clientNameMap = computed(() => {
     return map;
 });
 
+const { tasks } = useTasksQuery();
+
+const taskCountMap = computed(() => {
+    const map = new Map<string, number>();
+    tasks.value.forEach((task) => {
+        map.set(task.project_id, (map.get(task.project_id) ?? 0) + 1);
+    });
+    return map;
+});
+
 // Define column accessors for sorting.
 // Numeric columns use sortDescFirst so that the first click (chevron down) sorts highest-first,
 // while text columns default to ascending (A-Z) on first click (chevron down).
@@ -64,6 +82,11 @@ const columns = computed<SortableColumnDef<Project, SortColumn>[]>(() => [
         id: 'name',
         accessorFn: (row: Project) => row.name.toLowerCase(),
     },
+    {
+        id: 'tasks',
+        sortDescFirst: true,
+        accessorFn: (row: Project) => taskCountMap.value.get(row.id) ?? 0,
+    },
     {
         id: 'client_name',
         accessorFn: (row: Project) => {
@@ -161,7 +184,7 @@ async function createClient(client: CreateClientBody): Promise<Client | undefine
 }
 
 const gridTemplate = computed(() => {
-    return `grid-template-columns: minmax(300px, 1fr) minmax(150px, auto) minmax(140px, auto) minmax(130px, auto) ${props.showBillableRate ? 'minmax(130px, auto)' : ''} minmax(120px, auto) minmax(120px, auto) 80px;`;
+    return `grid-template-columns: minmax(300px, 1fr) minmax(100px, auto) minmax(150px, auto) minmax(140px, auto) minmax(130px, auto) ${props.showBillableRate ? 'minmax(130px, auto)' : ''} minmax(120px, auto) minmax(120px, auto) 80px;`;
 });
 </script>
 

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -36,6 +36,9 @@ function handleSort(column: SortColumn) {
             @sort="handleSort">
             Name
         </SortableTableHeaderCell>
+        <SortableTableHeaderCell column="tasks" v-bind="sortState" @sort="handleSort">
+            Tasks
+        </SortableTableHeaderCell>
         <SortableTableHeaderCell column="client_name" v-bind="sortState" @sort="handleSort">
             Client
         </SortableTableHeaderCell>

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -88,17 +88,17 @@ const showEditProjectModal = ref(false);
         <ContextMenuTrigger as-child>
             <TableRow :href="route('projects.show', { project: project.id })">
                 <div
-                    class="whitespace-nowrap min-w-0 flex items-center space-x-5 py-4 pr-3 text-sm font-medium text-text-primary pl-2 sm:pl-4 lg:pl-6">
+                    class="whitespace-nowrap min-w-0 flex items-center space-x-3 py-4 pr-3 text-sm font-medium text-text-primary pl-2 sm:pl-4 lg:pl-6">
                     <div
-                        :style="{
-                            backgroundColor: project.color,
-                            boxShadow: `var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) ${project.color}30`,
-                        }"
-                        class="w-3 h-3 ml-1 rounded-full"></div>
+                        :style="{ backgroundColor: project.color }"
+                        class="w-2.5 h-2.5 ml-1 rounded-full"></div>
                     <span class="overflow-ellipsis overflow-hidden">
                         {{ project.name }}
                     </span>
-                    <span class="text-text-secondary"> {{ projectTasksCount }} Tasks </span>
+                </div>
+                <div class="whitespace-nowrap px-3 py-4 text-sm text-text-primary">
+                    <span v-if="projectTasksCount">{{ projectTasksCount }}</span>
+                    <span v-else class="text-text-tertiary">--</span>
                 </div>
                 <div class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-primary">
                     <div v-if="project.client_id" class="overflow-ellipsis overflow-hidden">

resources/js/Components/Common/Reporting/ReportingOverview.vue

@@ -57,7 +57,7 @@ const { handleApiRequestNotifications } = useNotificationsStore();
 
 const startDate = useSessionStorage<string>(
     'reporting-start-date',
-    getLocalizedDayJs(getDayJsInstance()().format()).subtract(13, 'd').format()
+    getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
 );
 const endDate = useSessionStorage<string>(
     'reporting-end-date',

resources/js/Components/Timesheet/TimesheetHeader.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import DateRangeNavigator from '@/packages/ui/src/Input/DateRangeNavigator.vue';
+import { Button } from '@/packages/ui/src/Buttons';
+import { ChevronLeftIcon, ChevronRightIcon, CalendarIcon } from '@heroicons/vue/20/solid';
 
 defineProps<{
+    isCurrentWeek: boolean;
     weekNumber: number;
-    rangeLabel: string;
+    weekRangeDisplay: string;
     weekTotalFormatted: string;
 }>();
 
@@ -17,16 +19,33 @@ defineEmits<{
 <template>
     <div class="flex flex-wrap items-center justify-between gap-4 mb-4 px-2 sm:px-4 lg:px-6">
         <!-- Left: Week navigation -->
-        <DateRangeNavigator
-            :label="rangeLabel"
-            :secondary-label="`W${weekNumber}`"
-            previous-test-id="timesheet_prev_week"
-            trigger-test-id="timesheet_week_display"
-            next-test-id="timesheet_next_week"
-            trigger-aria-label="Return to current week"
-            @previous="$emit('previous')"
-            @next="$emit('next')"
-            @select="$emit('current')" />
+        <div class="flex items-center gap-2">
+            <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8"
+                data-testid="timesheet_prev_week"
+                @click="$emit('previous')">
+                <ChevronLeftIcon class="h-4 w-4" />
+            </Button>
+            <button
+                data-testid="timesheet_week_display"
+                class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-card-background rounded-md transition"
+                @click="$emit('current')">
+                <CalendarIcon class="h-4 w-4 text-icon-default" />
+                <span v-if="isCurrentWeek">This week</span>
+                <span v-else>{{ weekRangeDisplay }}</span>
+                <span class="text-text-tertiary">&middot; W{{ weekNumber }}</span>
+            </button>
+            <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8"
+                data-testid="timesheet_next_week"
+                @click="$emit('next')">
+                <ChevronRightIcon class="h-4 w-4" />
+            </Button>
+        </div>
 
         <!-- Right: Week total -->
         <div class="flex items-center gap-2.5">

resources/js/Pages/ReportingDetailed.vue

@@ -61,7 +61,7 @@ type TimeEntryRoundingType = 'up' | 'down' | 'nearest';
 
 const startDate = useSessionStorage<string>(
     'reporting-start-date',
-    getLocalizedDayJs(getDayJsInstance()().format()).subtract(13, 'd').format()
+    getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
 );
 const endDate = useSessionStorage<string>(
     'reporting-end-date',

resources/js/Pages/Timesheet.vue

@@ -30,7 +30,6 @@ import {
     getLocalizedDayJs,
 } from '@/packages/ui/src/utils/time';
 import { getBreakPlacementHint } from '@/packages/ui/src/utils/breakPlacement';
-import { getDateRangeLabel } from '@/packages/ui/src/utils/dateRange';
 import { useTimesheetWeek } from '@/utils/timesheet/useTimesheetWeek';
 import { useTimesheetCellMutations } from '@/utils/timesheet/useTimesheetCellMutations';
 import { useTimesheetRowMutations } from '@/utils/timesheet/useTimesheetRowMutations';
@@ -45,6 +44,7 @@ const {
     weekEnd,
     weekDays,
     weekNumber,
+    isCurrentWeek,
     todayDate,
     goToPreviousWeek,
     goToNextWeek,
@@ -109,9 +109,13 @@ const weekTotalFormatted = computed(() =>
     formatHumanReadableDuration(grandTotal.value, intervalFormat.value, numberFormat.value)
 );
 
-const weekRangeLabel = computed(() =>
-    getDateRangeLabel(weekStart.value, weekStart.value.add(6, 'day'))
-);
+const weekRangeDisplay = computed(() => {
+    const start = weekStart.value;
+    const end = start.add(6, 'day');
+    return start.month() === end.month()
+        ? `${start.format('MMM D')} - ${end.format('D')}`
+        : `${start.format('MMM D')} - ${end.format('MMM D')}`;
+});
 
 // ── Cell / row mutation handlers ──────────────────────────────────
 const {
@@ -204,8 +208,9 @@ async function createTag(name: string): Promise<Tag | undefined> {
     <AppLayout title="Timesheet" data-testid="timesheet_view">
         <div class="pt-5 lg:pt-8 pb-4 lg:pb-6">
             <TimesheetHeader
+                :is-current-week="isCurrentWeek"
                 :week-number="weekNumber"
-                :range-label="weekRangeLabel"
+                :week-range-display="weekRangeDisplay"
                 :week-total-formatted="weekTotalFormatted"
                 @previous="goToPreviousWeek"
                 @next="goToNextWeek"

resources/js/packages/ui/src/FullCalendar/CalendarToolbar.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import { Button } from '..';
+import { ChevronLeft, ChevronRight } from '@lucide/vue';
 import { Tabs, TabsList } from '../tabs';
 import TabBarItem from '../TabBar/TabBarItem.vue';
-import DateRangeNavigator from '../Input/DateRangeNavigator.vue';
 import CalendarSettingsPopover from './CalendarSettingsPopover.vue';
 import type { CalendarSettings } from './calendarSettings';
 
 defineProps<{
-    rangeLabel: string;
+    viewTitle: string;
     activeView: string;
     settings: CalendarSettings;
 }>();
@@ -22,13 +23,31 @@ const emit = defineEmits<{
 
 <template>
     <div class="flex items-center justify-between bg-default-background px-2 py-1.5">
-        <DateRangeNavigator
-            :label="rangeLabel"
-            trigger-test-id="calendar-title"
-            trigger-aria-label="today"
-            @previous="emit('prev')"
-            @next="emit('next')"
-            @select="emit('today')" />
+        <!-- Left: Navigation -->
+        <div class="flex items-center gap-1">
+            <Button
+                variant="outline"
+                size="sm"
+                class="h-8 w-8 p-0"
+                aria-label="Previous"
+                @click="emit('prev')">
+                <ChevronLeft class="h-4 w-4" />
+            </Button>
+            <Button
+                variant="outline"
+                size="sm"
+                class="h-8 w-8 p-0"
+                aria-label="Next"
+                @click="emit('next')">
+                <ChevronRight class="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="sm" @click="emit('today')"> today </Button>
+        </div>
+
+        <!-- Center: Title -->
+        <span data-testid="calendar-title" class="text-base font-semibold text-foreground">{{
+            viewTitle
+        }}</span>
 
         <!-- Right: View switcher + Settings -->
         <div class="flex items-center gap-1">

resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue

@@ -138,7 +138,7 @@ const {
 const {
     activeView,
     viewDays,
-    rangeLabel,
+    viewTitle,
     emitDatesChange,
     handlePrev,
     handleNext,
@@ -514,7 +514,7 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
 
         <template v-if="!loading">
             <CalendarToolbar
-                :range-label="rangeLabel"
+                :view-title="viewTitle"
                 :active-view="activeView"
                 :settings="calendarSettings"
                 @prev="handlePrev"

resources/js/packages/ui/src/FullCalendar/useCalendarNavigation.ts

@@ -2,7 +2,6 @@ import { computed, ref } from 'vue';
 import type { Dayjs } from 'dayjs';
 import { getLocalizedDayJs } from '../utils/time';
 import { getWeekStartDayNumber } from '../utils/settings';
-import { getDateRangeLabel } from '../utils/dateRange';
 
 export function useCalendarNavigation(callbacks: {
     onDatesChange: (payload: { start: Dayjs; end: Dayjs }) => void;
@@ -35,10 +34,24 @@ export function useCalendarNavigation(callbacks: {
         return days;
     });
 
-    const rangeLabel = computed(() => {
+    const viewTitle = computed(() => {
+        if (activeView.value === 'timeGridDay') {
+            return currentDate.value.format('MMMM YYYY');
+        }
+
         const days = viewDays.value;
         if (days.length === 0) return '';
-        return getDateRangeLabel(days[0]!, days[days.length - 1]!);
+
+        const first = days[0]!;
+        const last = days[days.length - 1]!;
+
+        if (first.year() !== last.year()) {
+            return `${first.format('MMM YYYY')} \u2013 ${last.format('MMM YYYY')}`;
+        }
+        if (first.month() !== last.month()) {
+            return `${first.format('MMM')} \u2013 ${last.format('MMM YYYY')}`;
+        }
+        return first.format('MMMM YYYY');
     });
 
     function emitDatesChange() {
@@ -86,7 +99,7 @@ export function useCalendarNavigation(callbacks: {
         activeView,
         currentDate,
         viewDays,
-        rangeLabel,
+        viewTitle,
         emitDatesChange,
         handlePrev,
         handleNext,

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

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { ChevronLeft, ChevronRight, CalendarIcon } from '@lucide/vue';
-import { Button } from '../Buttons';
-
-withDefaults(
-    defineProps<{
-        label: string;
-        secondaryLabel?: string;
-        previousDisabled?: boolean;
-        nextDisabled?: boolean;
-        previousTestId?: string;
-        triggerTestId?: string;
-        nextTestId?: string;
-        triggerAriaLabel?: string;
-    }>(),
-    {
-        secondaryLabel: undefined,
-        previousTestId: undefined,
-        triggerTestId: undefined,
-        nextTestId: undefined,
-        triggerAriaLabel: undefined,
-    }
-);
-
-const emit = defineEmits<{
-    previous: [];
-    next: [];
-    select: [];
-}>();
-
-const triggerClass =
-    'h-8 w-[13.5rem] justify-center rounded-none border-l border-r border-border-secondary px-2.5 text-text-primary tabular-nums hover:bg-card-background-active';
-</script>
-
-<template>
-    <div
-        class="tabular-nums inline-flex items-stretch overflow-hidden rounded-md border border-input bg-card-background shadow-xs dark:bg-transparent"
-        role="group"
-        aria-label="Date range navigation">
-        <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            class="h-8 w-8 shrink-0 rounded-none hover:bg-card-background-active"
-            aria-label="Previous"
-            :disabled="previousDisabled"
-            :data-testid="previousTestId"
-            @click="emit('previous')">
-            <ChevronLeft class="h-4 w-4" />
-        </Button>
-
-        <slot name="trigger" :trigger-class="triggerClass">
-            <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                :class="triggerClass"
-                :aria-label="triggerAriaLabel"
-                :data-testid="triggerTestId"
-                @click="emit('select')">
-                <CalendarIcon class="h-4 w-4 shrink-0 text-icon-default" />
-                <span class="min-w-0 truncate">{{ label }}</span>
-                <span v-if="secondaryLabel" class="shrink-0 text-text-tertiary">
-                    &middot; {{ secondaryLabel }}
-                </span>
-            </Button>
-        </slot>
-
-        <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            class="h-8 w-8 shrink-0 rounded-none hover:bg-card-background-active"
-            aria-label="Next"
-            :disabled="nextDisabled"
-            :data-testid="nextTestId"
-            @click="emit('next')">
-            <ChevronRight class="h-4 w-4" />
-        </Button>
-    </div>
-</template>

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

@@ -6,22 +6,22 @@ import { CalendarDate } from '@internationalized/date';
 import { CalendarIcon } from '@lucide/vue';
 import { computed, ref, inject, type ComputedRef, watch } from 'vue';
 import { twMerge } from 'tailwind-merge';
-import DateRangeNavigator from './DateRangeNavigator.vue';
-import { getLocalizedDayJs, firstDayIndex, type WeekStartDay } from '@/packages/ui/src/utils/time';
-import { getDateRangeLabel, shiftDateRange, type DateRangeDirection } from '../utils/dateRange';
+import {
+    getDayJsInstance,
+    getLocalizedDayJs,
+    firstDayIndex,
+    type WeekStartDay,
+} from '@/packages/ui/src/utils/time';
 import { type Organization } from '@/packages/api/src';
 import { getUserTimezone } from '@/packages/ui/src/utils/settings';
+import { formatDate } from '@/packages/ui/src/utils/time';
 
 const weekStartsOn = computed((): WeekStartDay => firstDayIndex.value as WeekStartDay);
 
-const props = withDefaults(
-    defineProps<{
-        start: string;
-        end: string;
-        allowFuture?: boolean;
-    }>(),
-    { allowFuture: false }
-);
+const props = defineProps<{
+    start: string;
+    end: string;
+}>();
 
 const emit = defineEmits<{
     (e: 'update:start', value: string): void;
@@ -35,13 +35,10 @@ interface CalendarDateRange {
 }
 
 const today = computed(() => {
-    const now = getLocalizedDayJs();
+    const now = getDayJsInstance()();
     return new CalendarDate(now.year(), now.month() + 1, now.date());
 });
 
-const startDay = computed(() => (props.start ? getLocalizedDayJs(props.start) : undefined));
-const endDay = computed(() => (props.end ? getLocalizedDayJs(props.end) : undefined));
-
 const modelValue = computed<CalendarDateRange>({
     get: () => ({
         start: props.start
@@ -94,7 +91,7 @@ function setLastWeek() {
 }
 
 function setLast14Days() {
-    emit('update:start', getLocalizedDayJs().subtract(13, 'days').startOf('day').format());
+    emit('update:start', getLocalizedDayJs().subtract(14, 'days').format());
     emit('update:end', getLocalizedDayJs().format());
     open.value = false;
 }
@@ -112,14 +109,14 @@ function setLastMonth() {
 }
 
 function setLast30Days() {
-    emit('update:start', getLocalizedDayJs().subtract(29, 'days').startOf('day').format());
+    emit('update:start', getLocalizedDayJs().subtract(30, 'days').format());
     emit('update:end', getLocalizedDayJs().format());
     open.value = false;
 }
 
 function setLast90Days() {
-    emit('update:start', getLocalizedDayJs().subtract(89, 'days').startOf('day').format());
-    emit('update:end', getLocalizedDayJs().format());
+    emit('update:start', getDayJsInstance()().subtract(90, 'days').format());
+    emit('update:end', getDayJsInstance()().format());
     open.value = false;
 }
 
@@ -143,38 +140,6 @@ function setLastYear() {
 
 const organization = inject<ComputedRef<Organization>>('organization');
 
-const displayLabel = computed(() => {
-    if (!startDay.value) return 'Pick a date';
-    if (!endDay.value) {
-        return getDateRangeLabel(startDay.value, startDay.value, {
-            dateFormat: organization?.value?.date_format,
-        });
-    }
-    return getDateRangeLabel(startDay.value, endDay.value, {
-        dateFormat: organization?.value?.date_format,
-    });
-});
-
-const nextRange = computed(() => {
-    if (!startDay.value || !endDay.value) return undefined;
-    return shiftDateRange(startDay.value, endDay.value, 1);
-});
-
-const nextDisabled = computed(
-    () =>
-        !props.allowFuture &&
-        !!nextRange.value &&
-        nextRange.value.start.isAfter(getLocalizedDayJs().endOf('day'))
-);
-
-function navigate(direction: DateRangeDirection) {
-    if (!startDay.value || !endDay.value) return;
-    const shifted = shiftDateRange(startDay.value, endDay.value, direction);
-    emit('update:start', shifted.start.format());
-    emit('update:end', shifted.end.format());
-    emit('submit');
-}
-
 watch(open, (value) => {
     if (value === false) {
         emit('submit');
@@ -183,120 +148,77 @@ watch(open, (value) => {
 </script>
 
 <template>
-    <DateRangeNavigator
-        :label="displayLabel"
-        :next-disabled="nextDisabled"
-        previous-test-id="date_range_picker_previous"
-        trigger-test-id="date_range_picker_display"
-        next-test-id="date_range_picker_next"
-        @previous="navigate(-1)"
-        @next="navigate(1)">
-        <template #trigger="{ triggerClass }">
-            <Popover v-model:open="open">
-                <PopoverTrigger as-child>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        :class="twMerge(triggerClass, !modelValue.start && 'text-muted-foreground')"
-                        data-testid="date_range_picker_display">
-                        <CalendarIcon class="text-text-quaternary h-4 w-4 shrink-0" />
-                        <span class="min-w-0 truncate">{{ displayLabel }}</span>
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent class="w-auto p-0">
-                    <div class="flex divide-x divide-border-secondary">
-                        <div
-                            class="text-text-primary text-sm flex flex-col space-y-0.5 items-start py-2 px-2">
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setToday"
-                                >Today</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setThisWeek"
-                                >This Week</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setLastWeek"
-                                >Last Week</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setLast14Days"
-                                >Last 14 Days</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setThisMonth"
-                                >This Month</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setLastMonth"
-                                >Last Month</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setLast30Days"
-                                >Last 30 Days</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setLast90Days"
-                                >Last 90 Days</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setLast12Months"
-                                >Last 12 Months</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setThisYear"
-                                >This Year</Button
-                            >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                class="justify-start"
-                                @click="setLastYear"
-                                >Last Year</Button
-                            >
-                        </div>
-                        <div class="pl-2">
-                            <RangeCalendar
-                                v-model="modelValue"
-                                initial-focus
-                                :number-of-months="2"
-                                :max-value="allowFuture ? undefined : today"
-                                :week-starts-on="weekStartsOn" />
-                        </div>
-                    </div>
-                </PopoverContent>
-            </Popover>
-        </template>
-    </DateRangeNavigator>
+    <Popover v-model:open="open">
+        <PopoverTrigger as-child>
+            <Button
+                variant="outline"
+                :class="
+                    twMerge(
+                        'flex w-full items-center justify-between whitespace-nowrap h-[34px] text-start',
+                        !modelValue && 'text-muted-foreground'
+                    )
+                ">
+                <CalendarIcon class="-ml-0.5 text-text-quaternary h-4 w-4" />
+                <template v-if="modelValue.start">
+                    <template v-if="modelValue.end">
+                        {{ formatDate(modelValue.start.toString(), organization?.date_format) }}
+                        -
+                        {{ formatDate(modelValue.end.toString(), organization?.date_format) }}
+                    </template>
+                    <template v-else>
+                        {{ formatDate(modelValue.start.toString(), organization?.date_format) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+            </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+            <div class="flex divide-x divide-border-secondary">
+                <div
+                    class="text-text-primary text-sm flex flex-col space-y-0.5 items-start py-2 px-2">
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setToday"
+                        >Today</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setThisWeek"
+                        >This Week</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setLastWeek"
+                        >Last Week</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setLast14Days"
+                        >Last 14 days</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setThisMonth"
+                        >This Month</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setLastMonth"
+                        >Last Month</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setLast30Days"
+                        >Last 30 days</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setLast90Days"
+                        >Last 90 days</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setLast12Months"
+                        >Last 12 months</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setThisYear"
+                        >This year</Button
+                    >
+                    <Button variant="ghost" size="sm" class="justify-start" @click="setLastYear"
+                        >Last year</Button
+                    >
+                </div>
+                <div class="pl-2">
+                    <RangeCalendar
+                        v-model="modelValue"
+                        initial-focus
+                        :number-of-months="2"
+                        :max-value="today"
+                        :week-starts-on="weekStartsOn" />
+                </div>
+            </div>
+        </PopoverContent>
+    </Popover>
 </template>

resources/js/packages/ui/src/index.ts

@@ -132,7 +132,6 @@ import FullCalendarDayHeader from './FullCalendar/FullCalendarDayHeader.vue';
 import FullCalendarEventContent from './FullCalendar/FullCalendarEventContent.vue';
 import TimeEntryCalendar from './FullCalendar/TimeEntryCalendar.vue';
 import DateRangePicker from './Input/DateRangePicker.vue';
-import DateRangeNavigator from './Input/DateRangeNavigator.vue';
 import { Label } from './label/index';
 import {
     NumberField,
@@ -212,7 +211,6 @@ export {
     ContextMenuSubTrigger,
     ContextMenuTrigger,
     DateRangePicker,
-    DateRangeNavigator,
     Dialog,
     DialogClose,
     DialogContent,

resources/js/packages/ui/src/utils/dateRange.test.ts

@@ -1,124 +0,0 @@
-import dayjs from 'dayjs';
-import { afterEach, describe, expect, test, vi } from 'vitest';
-import { getDayJsInstance, getLocalizedDayJs } from './time';
-import { getDateRangeLabel, shiftDateRange } from './dateRange';
-
-const reference = dayjs('2026-09-21');
-
-afterEach(() => {
-    vi.mocked(window.getTimezoneSetting).mockReturnValue('UTC');
-});
-
-describe('getDateRangeLabel', () => {
-    test('labels relative weeks', () => {
-        getDayJsInstance();
-        expect(
-            getDateRangeLabel(reference.startOf('week'), reference.endOf('week'), {
-                referenceDate: reference,
-            })
-        ).toBe('This Week');
-        expect(
-            getDateRangeLabel(
-                reference.subtract(1, 'week').startOf('week'),
-                reference.subtract(1, 'week').endOf('week'),
-                { referenceDate: reference }
-            )
-        ).toBe('Last Week');
-    });
-
-    test('labels common rolling ranges', () => {
-        expect(
-            getDateRangeLabel(reference.subtract(13, 'day'), reference.endOf('day'), {
-                referenceDate: reference,
-            })
-        ).toBe('Last 14 Days');
-    });
-
-    test('labels full calendar months and years', () => {
-        expect(
-            getDateRangeLabel(dayjs('2025-09-01'), dayjs('2025-09-30'), {
-                referenceDate: reference,
-            })
-        ).toBe('September 2025');
-        expect(
-            getDateRangeLabel(dayjs('2024-01-01'), dayjs('2024-12-31'), {
-                referenceDate: reference,
-            })
-        ).toBe('2024');
-    });
-
-    test('keeps relative labels for the current periods', () => {
-        expect(
-            getDateRangeLabel(reference.startOf('month'), reference.endOf('month'), {
-                referenceDate: reference,
-            })
-        ).toBe('This Month');
-        expect(
-            getDateRangeLabel(reference.startOf('year'), reference.endOf('year'), {
-                referenceDate: reference,
-            })
-        ).toBe('This Year');
-    });
-
-    test('uses the organization date format for custom ranges', () => {
-        expect(
-            getDateRangeLabel(dayjs('2026-08-03'), dayjs('2026-08-12'), {
-                dateFormat: 'slash-separated-dd-mm-yyyy',
-                referenceDate: reference,
-            })
-        ).toBe('03/08/2026 – 12/08/2026');
-    });
-
-    test('renders a single historical day without duplicating it', () => {
-        expect(
-            getDateRangeLabel(dayjs('2026-08-03'), dayjs('2026-08-03'), {
-                referenceDate: reference,
-            })
-        ).toBe('Aug 3, 2026');
-    });
-});
-
-describe('shiftDateRange', () => {
-    test('moves full weeks as calendar periods', () => {
-        getDayJsInstance();
-        const shifted = shiftDateRange(reference.startOf('week'), reference.endOf('week'), -1);
-        expect(shifted.start.format('YYYY-MM-DD')).toBe('2026-09-14');
-        expect(shifted.end.format('YYYY-MM-DD')).toBe('2026-09-20');
-    });
-
-    test('moves full months without truncating longer months', () => {
-        const shifted = shiftDateRange(dayjs('2026-02-01'), dayjs('2026-02-28'), 1);
-        expect(shifted.start.format('YYYY-MM-DD')).toBe('2026-03-01');
-        expect(shifted.end.format('YYYY-MM-DD')).toBe('2026-03-31');
-    });
-
-    test('moves custom ranges by their inclusive duration', () => {
-        const shifted = shiftDateRange(dayjs('2026-09-01'), dayjs('2026-09-14'), -1);
-        expect(shifted.start.format('YYYY-MM-DD')).toBe('2026-08-18');
-        expect(shifted.end.format('YYYY-MM-DD')).toBe('2026-08-31');
-    });
-
-    test('normalizes custom range offsets across the spring DST transition', () => {
-        vi.mocked(window.getTimezoneSetting).mockReturnValue('Europe/Vienna');
-        const shifted = shiftDateRange(
-            getLocalizedDayJs('2026-03-14T23:00:00Z'),
-            getLocalizedDayJs('2026-03-27T23:00:00Z'),
-            1
-        );
-
-        expect(shifted.start.format()).toBe('2026-03-29T00:00:00+01:00');
-        expect(shifted.end.format()).toBe('2026-04-11T23:59:59+02:00');
-    });
-
-    test('normalizes custom range offsets across the autumn DST transition', () => {
-        vi.mocked(window.getTimezoneSetting).mockReturnValue('Europe/Vienna');
-        const shifted = shiftDateRange(
-            getLocalizedDayJs('2026-10-17T22:00:00Z'),
-            getLocalizedDayJs('2026-10-30T23:00:00Z'),
-            1
-        );
-
-        expect(shifted.start.format()).toBe('2026-11-01T00:00:00+01:00');
-        expect(shifted.end.format()).toBe('2026-11-14T23:59:59+01:00');
-    });
-});

resources/js/packages/ui/src/utils/dateRange.ts

@@ -1,135 +0,0 @@
-import type { Dayjs } from 'dayjs';
-import { formatDate, getDayJsInstance, getLocalizedDayJs, type DateFormat } from './time';
-
-export type DateRangeDirection = -1 | 1;
-
-function isSameDay(left: Dayjs, right: Dayjs): boolean {
-    return left.isSame(right, 'day');
-}
-
-function isRange(start: Dayjs, end: Dayjs, expectedStart: Dayjs, expectedEnd: Dayjs): boolean {
-    return isSameDay(start, expectedStart) && isSameDay(end, expectedEnd);
-}
-
-function formatCompactRange(start: Dayjs, end: Dayjs): string {
-    if (start.year() !== end.year()) {
-        return `${start.format('MMM D, YYYY')} – ${end.format('MMM D, YYYY')}`;
-    }
-    if (start.month() !== end.month()) {
-        return `${start.format('MMM D')} – ${end.format('MMM D, YYYY')}`;
-    }
-    return `${start.format('MMM D')} – ${end.format('D, YYYY')}`;
-}
-
-/**
- * Returns a human-friendly label for an inclusive date range. Relative labels
- * are intentionally shared by reporting, the timesheet, and the calendar.
- */
-export function getDateRangeLabel(
-    start: Dayjs,
-    end: Dayjs,
-    options: { dateFormat?: DateFormat; referenceDate?: Dayjs } = {}
-): string {
-    // Ensure the configured first day of the week is applied before using startOf('week').
-    getDayJsInstance();
-
-    const reference = (options.referenceDate ?? getLocalizedDayJs()).startOf('day');
-    const rangeStart = start.startOf('day');
-    const rangeEnd = end.startOf('day');
-
-    const relativeDays: Array<[number, string]> = [
-        [0, 'Today'],
-        [-1, 'Yesterday'],
-        [1, 'Tomorrow'],
-    ];
-    for (const [offset, label] of relativeDays) {
-        const day = reference.add(offset, 'day');
-        if (isRange(rangeStart, rangeEnd, day, day)) return label;
-    }
-
-    const relativePeriods: Array<['week' | 'month' | 'year', number, string]> = [
-        ['week', 0, 'This Week'],
-        ['week', -1, 'Last Week'],
-        ['week', 1, 'Next Week'],
-        ['month', 0, 'This Month'],
-        ['month', -1, 'Last Month'],
-        ['month', 1, 'Next Month'],
-        ['year', 0, 'This Year'],
-        ['year', -1, 'Last Year'],
-        ['year', 1, 'Next Year'],
-    ];
-    for (const [unit, offset, label] of relativePeriods) {
-        const period = reference.add(offset, unit);
-        if (isRange(rangeStart, rangeEnd, period.startOf(unit), period.endOf(unit))) return label;
-    }
-
-    // Named calendar periods outside the relative windows above, e.g. "May 2025"
-    // for a full month and "2025" for a full year.
-    const monthStart = rangeStart.startOf('month');
-    if (isRange(rangeStart, rangeEnd, monthStart, monthStart.endOf('month'))) {
-        return rangeStart.format('MMMM YYYY');
-    }
-    const yearStart = rangeStart.startOf('year');
-    if (isRange(rangeStart, rangeEnd, yearStart, yearStart.endOf('year'))) {
-        return rangeStart.format('YYYY');
-    }
-
-    const rollingRanges: Array<[number, string]> = [
-        [14, 'Last 14 Days'],
-        [30, 'Last 30 Days'],
-        [90, 'Last 90 Days'],
-    ];
-    for (const [days, label] of rollingRanges) {
-        if (isRange(rangeStart, rangeEnd, reference.subtract(days - 1, 'day'), reference)) {
-            return label;
-        }
-    }
-    if (isRange(rangeStart, rangeEnd, reference.subtract(12, 'month'), reference)) {
-        return 'Last 12 Months';
-    }
-
-    if (isSameDay(rangeStart, rangeEnd)) {
-        return options.dateFormat
-            ? formatDate(rangeStart.format('YYYY-MM-DD'), options.dateFormat)
-            : rangeStart.format('MMM D, YYYY');
-    }
-
-    if (options.dateFormat) {
-        return `${formatDate(rangeStart.format('YYYY-MM-DD'), options.dateFormat)} – ${formatDate(
-            rangeEnd.format('YYYY-MM-DD'),
-            options.dateFormat
-        )}`;
-    }
-    return formatCompactRange(rangeStart, rangeEnd);
-}
-
-/** Shift an inclusive range by one period, preserving full calendar periods. */
-export function shiftDateRange(
-    start: Dayjs,
-    end: Dayjs,
-    direction: DateRangeDirection
-): { start: Dayjs; end: Dayjs } {
-    getDayJsInstance();
-
-    const rangeStart = start.startOf('day');
-    const rangeEnd = end.endOf('day');
-
-    if (isRange(rangeStart, rangeEnd, rangeStart.startOf('year'), rangeStart.endOf('year'))) {
-        const shiftedStart = rangeStart.add(direction, 'year').startOf('year');
-        return { start: shiftedStart, end: shiftedStart.endOf('year') };
-    }
-    if (isRange(rangeStart, rangeEnd, rangeStart.startOf('month'), rangeStart.endOf('month'))) {
-        const shiftedStart = rangeStart.add(direction, 'month').startOf('month');
-        return { start: shiftedStart, end: shiftedStart.endOf('month') };
-    }
-    if (isRange(rangeStart, rangeEnd, rangeStart.startOf('week'), rangeStart.endOf('week'))) {
-        const shiftedStart = rangeStart.add(direction, 'week').startOf('week');
-        return { start: shiftedStart, end: shiftedStart.endOf('week') };
-    }
-
-    const days = rangeEnd.startOf('day').diff(rangeStart, 'day') + 1;
-    return {
-        start: rangeStart.add(days * direction, 'day').startOf('day'),
-        end: rangeEnd.add(days * direction, 'day').endOf('day'),
-    };
-}