From 122df392e08486d5d024d166fbe2e9dd9a72c0b6 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 6 Feb 2026 16:44:48 +0530
Subject: [PATCH] fix: resolve date picker navigation bugs

- Reset monthOffset when selecting custom dates to prevent stale state
- Use date-based comparison for canNavigateNext instead of monthOffset
  so forward navigation works correctly after URL restore
- Use date-based comparison for week navigation label instead of
  monthOffset so "Week #N" label displays correctly after URL restore
---
 .../components/ui/DatePicker/DatePicker.vue      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
index 5392641bd..b8e2636b0 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -80,7 +80,15 @@ const monthOffset = ref(0);
 const showMonthNavigation = computed(() =>
   isNavigableRange(selectedRange.value)
 );
-const canNavigateNext = computed(() => monthOffset.value < 0);
+const canNavigateNext = computed(() => {
+  if (!isNavigableRange(selectedRange.value)) return false;
+  // Compare selected start to the current period's start to determine if we're in the past
+  const currentRange = getActiveDateRange(
+    selectedRange.value,
+    currentDate.value
+  );
+  return selectedStartDate.value < currentRange.start;
+});
 
 const navigationLabel = computed(() => {
   const range = selectedRange.value;
@@ -90,7 +98,10 @@ const navigationLabel = computed(() => {
     }).format(selectedStartDate.value);
   }
   if (range === DATE_RANGE_TYPES.THIS_WEEK) {
-    if (monthOffset.value === 0) return null;
+    const currentWeekRange = getActiveDateRange(range, currentDate.value);
+    const isCurrentWeek =
+      selectedStartDate.value.getTime() === currentWeekRange.start.getTime();
+    if (isCurrentWeek) return null;
     const weekNumber = getWeek(selectedStartDate.value, { weekStartsOn: 1 });
     return t('DATE_PICKER.WEEK_NUMBER', { weekNumber });
   }
@@ -210,6 +221,7 @@ const moveCalendar = (calendar, direction, period = MONTH) => {
 
 const selectDate = day => {
   selectedRange.value = CUSTOM_RANGE;
+  monthOffset.value = 0;
   if (!selectingEndDate.value || day < selectedStartDate.value) {
     selectedStartDate.value = day;
     selectedEndDate.value = null;