@multiplatform.one/table 6.0.4 → 6.3.0

package/src/components/DataTableDateFilter/index.tsx

@@ -6,10 +6,21 @@ import {
   ClockIcon,
   XIcon,
 } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { formatAbsoluteDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useState, useMemo } from "react";
 import { Button, DatePicker } from "@multiplatform.one/forms";
-import { Popover, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
+import {
+  Popover,
+  ScrollView,
+  Separator,
+  Text,
+  View,
+  XStack,
+  YStack,
+  getTokens,
+  getVariableValue,
+} from "tamagui";
+import { t } from "../../shared/t";
 
 export type DateFilterOperator =
   | "is"
@@ -61,10 +72,16 @@ export interface DataTableDateFilterProps {
   maxDate?: Date;
 }
 
+// LC-10: the preset window clips on whole-row boundaries only — its max
+// height is an exact multiple of the row height (plus in-between gaps),
+// never a fractional row. The scrollbar is the affordance for the rest.
+const PRESET_VISIBLE_ROWS = 4;
+const PRESET_ROW_GAP_TOKEN = "$1";
+
 export function DataTableDateFilter({
   value,
   onChange,
-  placeholder = "Filter by date...",
+  placeholder = t("Filter by date..."),
   disabled = false,
   showPresets = true,
   customPresets = [],
@@ -76,6 +93,18 @@ export function DataTableDateFilter({
   const sz = knobProps.sizeToken;
   const triggerMinWidth = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
   const popoverMinWidth = sz === "$3" ? 280 : sz === "$5" ? 360 : 320;
+  // Row height derives from the same size token the preset Buttons render
+  // at, so the whole-row window stays exact under every size knob.
+  const tokens = getTokens({ prefixed: true });
+  const sizeTokens = tokens.size as Record<string, unknown>;
+  const presetRowHeight = Math.round(
+    getVariableValue(sizeTokens[sz as string] ?? sizeTokens.$true),
+  );
+  const presetRowGap = Math.round(
+    getVariableValue((tokens.space as Record<string, unknown>)[PRESET_ROW_GAP_TOKEN]),
+  );
+  const presetListMaxHeight =
+    PRESET_VISIBLE_ROWS * presetRowHeight + (PRESET_VISIBLE_ROWS - 1) * presetRowGap;
   const [isOpen, setIsOpen] = useState(false);
   const [activePresetId, setActivePresetId] = useState<string | null>(null);
 
@@ -83,31 +112,31 @@ export function DataTableDateFilter({
   const defaultPresets: DateFilterPreset[] = [
     {
       id: "today",
-      label: "Today",
+      label: t("Today"),
       operator: "isToday",
       icon: <CalendarIcon size={16} />,
     },
     {
       id: "yesterday",
-      label: "Yesterday",
+      label: t("Yesterday"),
       operator: "isYesterday",
       icon: <CalendarIcon size={16} />,
     },
     {
       id: "thisWeek",
-      label: "This Week",
+      label: t("This Week"),
       operator: "isThisWeek",
       icon: <CalendarDotsIcon size={16} />,
     },
     {
       id: "thisMonth",
-      label: "This Month",
+      label: t("This Month"),
       operator: "isThisMonth",
       icon: <CalendarDotsIcon size={16} />,
     },
     {
       id: "last7days",
-      label: "Last 7 Days",
+      label: t("Last 7 Days"),
       operator: "isBetween",
       values: [
         new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
@@ -117,7 +146,7 @@ export function DataTableDateFilter({
     },
     {
       id: "last30days",
-      label: "Last 30 Days",
+      label: t("Last 30 Days"),
       operator: "isBetween",
       values: [
         new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
@@ -127,13 +156,13 @@ export function DataTableDateFilter({
     },
     {
       id: "empty",
-      label: "Is Empty",
+      label: t("Is Empty"),
       operator: "isEmpty",
       icon: <XIcon size={16} />,
     },
     {
       id: "notEmpty",
-      label: "Is Not Empty",
+      label: t("Is Not Empty"),
       operator: "isNotEmpty",
       icon: <ClockIcon size={16} />,
     },
@@ -141,6 +170,9 @@ export function DataTableDateFilter({
 
   const allPresets = useMemo(() => [...defaultPresets, ...customPresets], [customPresets]);
 
+  // LC-21 (owner adjudication 2026-08-12): a filter panel composes multiple
+  // picks — selection applies live and never dismisses. The panel closes only
+  // on dismissal intent: outside click, Escape, or the trigger toggle.
   const handlePresetSelect = (preset: DateFilterPreset) => {
     const newValue: DateFilterValue = {
       operator: preset.operator,
@@ -149,7 +181,6 @@ export function DataTableDateFilter({
     };
     setActivePresetId(preset.id);
     onChange?.(newValue);
-    setIsOpen(false);
   };
 
   const handleCustomDateSelect = (dateValue: string, operator: DateFilterOperator = "is") => {
@@ -157,6 +188,8 @@ export function DataTableDateFilter({
       operator,
       value: dateValue,
     };
+    // Custom commits take over from the preset (7.3 two-way sync).
+    setActivePresetId(null);
     onChange?.(newValue);
   };
 
@@ -165,25 +198,55 @@ export function DataTableDateFilter({
       operator: "isBetween",
       values: [startDate, endDate],
     };
+    setActivePresetId(null);
     onChange?.(newValue);
   };
 
+  // The custom-range pickers are controlled from the SAME filter value the
+  // trigger label reads (7.2/7.3): a preset pick populates them through this
+  // resolved window, and a manual pick starts from the preset's dates.
+  const pickerRange = useMemo(() => resolveDateFilterRange(value), [value]);
+
+  // Canonical LC-14 onChange from the pickers commits live (LC-21: the filter
+  // panel stays open while composing; the DatePicker's own calendar popover is
+  // a single-value picker that closes itself on pick). Custom picks commit on
+  // day boundaries so the filter matches exactly the dates the pickers show.
+  const commitCustomRange = (start: Date | null, end: Date | null) => {
+    setActivePresetId(null);
+    if (start && end) {
+      handleDateRangeSelect(startOfDay(start).toISOString(), endOfDay(end).toISOString());
+    } else if (start) {
+      onChange?.({ operator: "isOnOrAfter", value: startOfDay(start).toISOString() });
+    } else if (end) {
+      onChange?.({ operator: "isOnOrBefore", value: endOfDay(end).toISOString() });
+    } else {
+      onChange?.(undefined);
+    }
+  };
+
+  const handleStartDatePick = (date: Date | null) => {
+    // Picking a start past the current end starts a new range.
+    const end =
+      date && pickerRange.end && pickerRange.end < startOfDay(date) ? null : pickerRange.end;
+    commitCustomRange(date, end);
+  };
+
+  const handleEndDatePick = (date: Date | null) => {
+    // Picking an end before the current start starts a new range.
+    const start =
+      date && pickerRange.start && pickerRange.start > endOfDay(date) ? null : pickerRange.start;
+    commitCustomRange(start, date);
+  };
+
   const handleClear = () => {
     setActivePresetId(null);
     onChange?.(undefined);
-    setIsOpen(false);
   };
 
+  // House absolute register (LC-12 / DF-14) — one formatter owns every absolute date.
   const formatDate = (dateString: string) => {
-    try {
-      return new Date(dateString).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      });
-    } catch {
-      return dateString;
-    }
+    const formatted = formatAbsoluteDate(dateString, { year: "always" });
+    return formatted === "" ? dateString : formatted;
   };
 
   const getDisplayValue = () => {
@@ -191,56 +254,73 @@ export function DataTableDateFilter({
 
     switch (value.operator) {
       case "is":
-        return value.value ? `Is ${formatDate(value.value)}` : placeholder;
+        return value.value ? t("Is {{date}}", { date: formatDate(value.value) }) : placeholder;
       case "isNot":
-        return value.value ? `Is not ${formatDate(value.value)}` : placeholder;
+        return value.value ? t("Is not {{date}}", { date: formatDate(value.value) }) : placeholder;
       case "isBefore":
-        return value.value ? `Before ${formatDate(value.value)}` : placeholder;
+        return value.value ? t("Before {{date}}", { date: formatDate(value.value) }) : placeholder;
       case "isAfter":
-        return value.value ? `After ${formatDate(value.value)}` : placeholder;
+        return value.value ? t("After {{date}}", { date: formatDate(value.value) }) : placeholder;
       case "isOnOrBefore":
-        return value.value ? `On or before ${formatDate(value.value)}` : placeholder;
+        return value.value
+          ? t("On or before {{date}}", { date: formatDate(value.value) })
+          : placeholder;
       case "isOnOrAfter":
-        return value.value ? `On or after ${formatDate(value.value)}` : placeholder;
+        return value.value
+          ? t("On or after {{date}}", { date: formatDate(value.value) })
+          : placeholder;
       case "isBetween":
         return value.values
-          ? `${formatDate(value.values[0])} - ${formatDate(value.values[1])}`
+          ? t("{{start}} - {{end}}", {
+              start: formatDate(value.values[0]),
+              end: formatDate(value.values[1]),
+            })
           : placeholder;
       case "isToday":
-        return "Today";
+        return t("Today");
       case "isYesterday":
-        return "Yesterday";
+        return t("Yesterday");
       case "isTomorrow":
-        return "Tomorrow";
+        return t("Tomorrow");
       case "isThisWeek":
-        return "This week";
+        return t("This week");
       case "isLastWeek":
-        return "Last week";
+        return t("Last week");
       case "isNextWeek":
-        return "Next week";
+        return t("Next week");
       case "isThisMonth":
-        return "This month";
+        return t("This month");
       case "isLastMonth":
-        return "Last month";
+        return t("Last month");
       case "isNextMonth":
-        return "Next month";
+        return t("Next month");
       case "isThisYear":
-        return "This year";
+        return t("This year");
       case "isLastYear":
-        return "Last year";
+        return t("Last year");
       case "isNextYear":
-        return "Next year";
+        return t("Next year");
       case "isEmpty":
-        return "Is empty";
+        return t("Is empty");
       case "isNotEmpty":
-        return "Is not empty";
+        return t("Is not empty");
       default:
         return placeholder;
     }
   };
 
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
+    // LC-06: anchored editor — start-aligned to the trigger edge with
+    // collision handling (flip + clamp + resize inside the viewport).
+    <Popover
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      placement="bottom-start"
+      offset={4}
+      stayInFrame
+      allowFlip
+      resize
+    >
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
@@ -253,7 +333,9 @@ export function DataTableDateFilter({
           <Text
             flex={1}
             textAlign="left"
-            color={value ? undefined : "$color10"}
+            // LC-40: while disabled, the placeholder tier ($color10) drops
+            // below AA on the washed chrome — pin to the lowest AA step.
+            color={disabled ? "$color11" : value ? undefined : "$color10"}
             fontSize="$3"
             numberOfLines={1}
           >
@@ -263,146 +345,163 @@ export function DataTableDateFilter({
         </Button>
       </Popover.Trigger>
 
+      {/* Overlay contract: elevatedSurface + transition-paired enter/exit
+          motion (LC-24) — same fragments as the shared components
+          PopoverContent. The popper resize middleware caps the height to
+          the viewport; the ScrollView keeps every section reachable
+          instead of painting past the frame (LC-10). */}
       <Popover.Content
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor="$borderColor"
-        enterStyle={{ x: 0, y: -10, opacity: 0 }}
-        exitStyle={{ x: 0, y: -10, opacity: 0 }}
+        {...knobProps.elevatedSurface}
+        transition={knobProps.transition}
+        enterStyle={{ opacity: 0, y: -4, scale: 0.97 }}
+        exitStyle={{ opacity: 0, y: -4, scale: 0.97 }}
         minWidth={popoverMinWidth}
+        padding={0}
+        overflow="hidden"
       >
-        <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
-          <XStack justifyContent="space-between" alignItems="center">
-            <Text fontSize="$5" fontWeight="600">
-              Date Filter
-            </Text>
-            {value && (
-              <Button size="$2" variant="outlined" onPress={handleClear} icon={<XIcon size={16} />}>
-                Clear
-              </Button>
+        <Popover.ScrollView minHeight={0}>
+          <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
+            <XStack justifyContent="space-between" alignItems="center">
+              <Text fontSize="$5" fontWeight="600">
+                {t("Date Filter")}
+              </Text>
+              {value && (
+                <Button
+                  size="$2"
+                  variant="outlined"
+                  onPress={handleClear}
+                  icon={<XIcon size={16} />}
+                >
+                  {t("Clear")}
+                </Button>
+              )}
+            </XStack>
+
+            {/* Quick Presets */}
+            {showPresets && (
+              <YStack gap="$2">
+                <Text fontSize="$4" fontWeight="500">
+                  {t("Quick Filters")}
+                </Text>
+                <ScrollView maxHeight={presetListMaxHeight}>
+                  <YStack gap={PRESET_ROW_GAP_TOKEN}>
+                    {allPresets.map((preset) => (
+                      <Button
+                        key={preset.id}
+                        size={knobProps.sizeToken}
+                        variant="outlined"
+                        justifyContent="flex-start"
+                        onPress={() => handlePresetSelect(preset)}
+                        {...(activePresetId === preset.id
+                          ? { theme: "accent" as any, backgroundColor: "$background" }
+                          : undefined)}
+                      >
+                        <Text fontSize="$3">{preset.label}</Text>
+                      </Button>
+                    ))}
+                  </YStack>
+                </ScrollView>
+              </YStack>
             )}
-          </XStack>
 
-          {/* Quick Presets */}
-          {showPresets && (
-            <YStack gap="$2">
+            <Separator />
+
+            {/* Custom Date Selection */}
+            <YStack {...knobProps.gap}>
               <Text fontSize="$4" fontWeight="500">
-                Quick Filters
+                {t("Custom Date")}
               </Text>
-              <ScrollView maxHeight={120}>
-                <YStack gap="$1">
-                  {allPresets.map((preset) => (
-                    <Button
-                      key={preset.id}
-                      size={knobProps.sizeToken}
-                      variant="outlined"
-                      justifyContent="flex-start"
-                      onPress={() => handlePresetSelect(preset)}
-                      {...(activePresetId === preset.id
-                        ? { theme: "accent" as any, backgroundColor: "$background" }
-                        : undefined)}
-                    >
-                      <Text fontSize="$3">{preset.label}</Text>
-                    </Button>
-                  ))}
-                </YStack>
-              </ScrollView>
-            </YStack>
-          )}
-
-          <Separator />
-
-          {/* Custom Date Selection */}
-          <YStack {...knobProps.gap}>
-            <Text fontSize="$4" fontWeight="500">
-              Custom Date
-            </Text>
-
-            <XStack gap="$2">
-              <Button
-                flex={1}
-                size={knobProps.sizeToken}
-                variant="outlined"
-                onPress={() => handleCustomDateSelect(new Date().toISOString(), "is")}
-              >
-                Today
-              </Button>
-              <Button
-                flex={1}
-                size={knobProps.sizeToken}
-                variant="outlined"
-                onPress={() =>
-                  handleCustomDateSelect(
-                    new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
-                    "is",
-                  )
-                }
-              >
-                Yesterday
-              </Button>
-            </XStack>
 
-            {/* Date Range */}
-            <YStack gap="$2">
-              <Text fontSize="$3" fontWeight="500">
-                Date Range
-              </Text>
               <XStack gap="$2">
                 <Button
                   flex={1}
                   size={knobProps.sizeToken}
                   variant="outlined"
-                  onPress={() =>
-                    handleDateRangeSelect(
-                      new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
-                      new Date().toISOString(),
-                    )
-                  }
+                  onPress={() => handleCustomDateSelect(new Date().toISOString(), "is")}
                 >
-                  Last 7 days
+                  {t("Today")}
                 </Button>
                 <Button
                   flex={1}
                   size={knobProps.sizeToken}
                   variant="outlined"
                   onPress={() =>
-                    handleDateRangeSelect(
-                      new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
-                      new Date().toISOString(),
+                    handleCustomDateSelect(
+                      new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+                      "is",
                     )
                   }
                 >
-                  Last 30 days
+                  {t("Yesterday")}
                 </Button>
               </XStack>
-            </YStack>
 
-            {/* DatePicker-based Custom Range Selection */}
-            <YStack gap="$2">
-              <Text fontSize="$3" fontWeight="500">
-                Custom Range
-              </Text>
-              <XStack gap="$2">
-                <View flex={1} data-testid="start-date-picker">
-                  <DatePicker
-                    placeholder="Start date"
-                    label="From"
-                    minDate={minDate}
-                    maxDate={maxDate}
-                  />
-                </View>
-                <View flex={1} data-testid="end-date-picker">
-                  <DatePicker
-                    placeholder="End date"
-                    label="To"
-                    minDate={minDate}
-                    maxDate={maxDate}
-                  />
-                </View>
-              </XStack>
+              {/* Date Range */}
+              <YStack gap="$2">
+                <Text fontSize="$3" fontWeight="500">
+                  {t("Date Range")}
+                </Text>
+                <XStack gap="$2">
+                  <Button
+                    flex={1}
+                    size={knobProps.sizeToken}
+                    variant="outlined"
+                    onPress={() =>
+                      handleDateRangeSelect(
+                        new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+                        new Date().toISOString(),
+                      )
+                    }
+                  >
+                    {t("Last 7 days")}
+                  </Button>
+                  <Button
+                    flex={1}
+                    size={knobProps.sizeToken}
+                    variant="outlined"
+                    onPress={() =>
+                      handleDateRangeSelect(
+                        new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
+                        new Date().toISOString(),
+                      )
+                    }
+                  >
+                    {t("Last 30 days")}
+                  </Button>
+                </XStack>
+              </YStack>
+
+              {/* DatePicker-based Custom Range Selection */}
+              <YStack gap="$2">
+                <Text fontSize="$3" fontWeight="500">
+                  {t("Custom Range")}
+                </Text>
+                <XStack gap="$2">
+                  <View flex={1} data-testid="start-date-picker">
+                    <DatePicker
+                      placeholder={t("Start date")}
+                      label={t("From")}
+                      minDate={minDate}
+                      maxDate={maxDate}
+                      value={pickerRange.start ?? null}
+                      onChange={handleStartDatePick}
+                    />
+                  </View>
+                  <View flex={1} data-testid="end-date-picker">
+                    <DatePicker
+                      placeholder={t("End date")}
+                      label={t("To")}
+                      minDate={minDate}
+                      maxDate={maxDate}
+                      value={pickerRange.end ?? null}
+                      onChange={handleEndDatePick}
+                    />
+                  </View>
+                </XStack>
+              </YStack>
             </YStack>
           </YStack>
-        </YStack>
+        </Popover.ScrollView>
       </Popover.Content>
     </Popover>
   );
@@ -410,6 +509,102 @@ export function DataTableDateFilter({
 
 // Date Filter Utilities
 
+function startOfDay(date: Date): Date {
+  const day = new Date(date);
+  day.setHours(0, 0, 0, 0);
+  return day;
+}
+
+function endOfDay(date: Date): Date {
+  const day = new Date(date);
+  day.setHours(23, 59, 59, 999);
+  return day;
+}
+
+/**
+ * Resolve the concrete calendar window a DateFilterValue covers, used to
+ * populate the custom-range DatePickers (spec tasks 7.2/7.3): presets and
+ * relative operators (isToday, isThisWeek, …) resolve against `now` with the
+ * same boundaries applyDateFilter matches on; open-ended operators leave the
+ * missing side null; negations/emptiness have no contiguous window.
+ */
+export function resolveDateFilterRange(
+  filterValue: DateFilterValue | undefined,
+  now: Date = new Date(),
+): { start: Date | null; end: Date | null } {
+  if (!filterValue) return { start: null, end: null };
+  const { operator, value, values } = filterValue;
+  const today = startOfDay(now);
+  const parsed = (iso?: string) => {
+    if (!iso) return null;
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime()) ? null : date;
+  };
+  const dayWindow = (offsetDays: number) => {
+    const day = new Date(today);
+    day.setDate(day.getDate() + offsetDays);
+    return { start: day, end: endOfDay(day) };
+  };
+  const weekWindow = (offsetWeeks: number) => {
+    // Same week boundaries as applyDateFilter: weeks start on Sunday.
+    const weekStart = new Date(today);
+    weekStart.setDate(today.getDate() - today.getDay() + offsetWeeks * 7);
+    const weekEnd = new Date(weekStart);
+    weekEnd.setDate(weekStart.getDate() + 6);
+    return { start: weekStart, end: endOfDay(weekEnd) };
+  };
+  const monthWindow = (offsetMonths: number) => {
+    const start = new Date(today.getFullYear(), today.getMonth() + offsetMonths, 1);
+    const end = new Date(today.getFullYear(), today.getMonth() + offsetMonths + 1, 0);
+    return { start, end: endOfDay(end) };
+  };
+  const yearWindow = (offsetYears: number) => {
+    const start = new Date(today.getFullYear() + offsetYears, 0, 1);
+    const end = new Date(today.getFullYear() + offsetYears, 11, 31);
+    return { start, end: endOfDay(end) };
+  };
+  switch (operator) {
+    case "isBetween":
+      return { start: parsed(values?.[0]), end: parsed(values?.[1]) };
+    case "is": {
+      const date = parsed(value);
+      return date ? { start: date, end: date } : { start: null, end: null };
+    }
+    case "isAfter":
+    case "isOnOrAfter":
+      return { start: parsed(value), end: null };
+    case "isBefore":
+    case "isOnOrBefore":
+      return { start: null, end: parsed(value) };
+    case "isToday":
+      return dayWindow(0);
+    case "isYesterday":
+      return dayWindow(-1);
+    case "isTomorrow":
+      return dayWindow(1);
+    case "isThisWeek":
+      return weekWindow(0);
+    case "isLastWeek":
+      return weekWindow(-1);
+    case "isNextWeek":
+      return weekWindow(1);
+    case "isThisMonth":
+      return monthWindow(0);
+    case "isLastMonth":
+      return monthWindow(-1);
+    case "isNextMonth":
+      return monthWindow(1);
+    case "isThisYear":
+      return yearWindow(0);
+    case "isLastYear":
+      return yearWindow(-1);
+    case "isNextYear":
+      return yearWindow(1);
+    default:
+      return { start: null, end: null };
+  }
+}
+
 export function applyDateFilter<T>(
   data: T[],
   columnKey: keyof T,
@@ -460,26 +655,28 @@ export function applyDateFilter<T>(
         tomorrow.setDate(tomorrow.getDate() + 1);
         return itemDate.toDateString() === tomorrow.toDateString();
       }
+      // Week windows are day-granular like isToday/isThisMonth: the last day
+      // counts in full (endOfDay), not only its first midnight instant.
       case "isThisWeek": {
         const weekStart = new Date(today);
         weekStart.setDate(today.getDate() - today.getDay());
         const weekEnd = new Date(weekStart);
         weekEnd.setDate(weekStart.getDate() + 6);
-        return itemDate >= weekStart && itemDate <= weekEnd;
+        return itemDate >= weekStart && itemDate <= endOfDay(weekEnd);
       }
       case "isLastWeek": {
         const lastWeekStart = new Date(today);
         lastWeekStart.setDate(today.getDate() - today.getDay() - 7);
         const lastWeekEnd = new Date(lastWeekStart);
         lastWeekEnd.setDate(lastWeekStart.getDate() + 6);
-        return itemDate >= lastWeekStart && itemDate <= lastWeekEnd;
+        return itemDate >= lastWeekStart && itemDate <= endOfDay(lastWeekEnd);
       }
       case "isNextWeek": {
         const nextWeekStart = new Date(today);
         nextWeekStart.setDate(today.getDate() - today.getDay() + 7);
         const nextWeekEnd = new Date(nextWeekStart);
         nextWeekEnd.setDate(nextWeekStart.getDate() + 6);
-        return itemDate >= nextWeekStart && itemDate <= nextWeekEnd;
+        return itemDate >= nextWeekStart && itemDate <= endOfDay(nextWeekEnd);
       }
       case "isThisMonth":
         return (