@multiplatform.one/table 6.0.4 → 6.3.0

package/dist/cjs/components/DataTableDateFilter/index.cjs

@@ -35,6 +35,7 @@ var DataTableDateFilter_exports = {};
 __export(DataTableDateFilter_exports, {
   DataTableDateFilter: () => DataTableDateFilter,
   applyDateFilter: () => applyDateFilter,
+  resolveDateFilterRange: () => resolveDateFilterRange,
   useDateFilter: () => useDateFilter
 });
 module.exports = __toCommonJS(DataTableDateFilter_exports);
@@ -43,11 +44,14 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react2 = __toESM(require("react"));
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
+var import_t = require("../../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const PRESET_VISIBLE_ROWS = 4;
+const PRESET_ROW_GAP_TOKEN = "$1";
 function DataTableDateFilter({
   value,
   onChange,
-  placeholder = "Filter by date...",
+  placeholder = (0, import_t.t)("Filter by date..."),
   disabled = false,
   showPresets = true,
   customPresets = [],
@@ -61,39 +65,46 @@ function DataTableDateFilter({
   const sz = knobProps.sizeToken;
   const triggerMinWidth = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
   const popoverMinWidth = sz === "$3" ? 280 : sz === "$5" ? 360 : 320;
+  const tokens = (0, import_tamagui.getTokens)({
+    prefixed: true
+  });
+  const sizeTokens = tokens.size;
+  const presetRowHeight = Math.round((0, import_tamagui.getVariableValue)(sizeTokens[sz] ?? sizeTokens.$true));
+  const presetRowGap = Math.round((0, import_tamagui.getVariableValue)(tokens.space[PRESET_ROW_GAP_TOKEN]));
+  const presetListMaxHeight = PRESET_VISIBLE_ROWS * presetRowHeight + (PRESET_VISIBLE_ROWS - 1) * presetRowGap;
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   const [activePresetId, setActivePresetId] = (0, import_react2.useState)(null);
   const defaultPresets = [{
     id: "today",
-    label: "Today",
+    label: (0, import_t.t)("Today"),
     operator: "isToday",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
       size: 16
     })
   }, {
     id: "yesterday",
-    label: "Yesterday",
+    label: (0, import_t.t)("Yesterday"),
     operator: "isYesterday",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
       size: 16
     })
   }, {
     id: "thisWeek",
-    label: "This Week",
+    label: (0, import_t.t)("This Week"),
     operator: "isThisWeek",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarDotsIcon, {
       size: 16
     })
   }, {
     id: "thisMonth",
-    label: "This Month",
+    label: (0, import_t.t)("This Month"),
     operator: "isThisMonth",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarDotsIcon, {
       size: 16
     })
   }, {
     id: "last7days",
-    label: "Last 7 Days",
+    label: (0, import_t.t)("Last 7 Days"),
     operator: "isBetween",
     values: [new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()],
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {
@@ -101,7 +112,7 @@ function DataTableDateFilter({
     })
   }, {
     id: "last30days",
-    label: "Last 30 Days",
+    label: (0, import_t.t)("Last 30 Days"),
     operator: "isBetween",
     values: [new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()],
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {
@@ -109,14 +120,14 @@ function DataTableDateFilter({
     })
   }, {
     id: "empty",
-    label: "Is Empty",
+    label: (0, import_t.t)("Is Empty"),
     operator: "isEmpty",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
       size: 16
     })
   }, {
     id: "notEmpty",
-    label: "Is Not Empty",
+    label: (0, import_t.t)("Is Not Empty"),
     operator: "isNotEmpty",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
       size: 16
@@ -131,13 +142,13 @@ function DataTableDateFilter({
     };
     setActivePresetId(preset.id);
     onChange?.(newValue);
-    setIsOpen(false);
   };
   const handleCustomDateSelect = (dateValue, operator = "is") => {
     const newValue = {
       operator,
       value: dateValue
     };
+    setActivePresetId(null);
     onChange?.(newValue);
   };
   const handleDateRangeSelect = (startDate, endDate) => {
@@ -145,234 +156,409 @@ function DataTableDateFilter({
       operator: "isBetween",
       values: [startDate, endDate]
     };
+    setActivePresetId(null);
     onChange?.(newValue);
   };
+  const pickerRange = (0, import_react2.useMemo)(() => resolveDateFilterRange(value), [value]);
+  const commitCustomRange = (start, end) => {
+    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?.(void 0);
+    }
+  };
+  const handleStartDatePick = date => {
+    const end = date && pickerRange.end && pickerRange.end < startOfDay(date) ? null : pickerRange.end;
+    commitCustomRange(date, end);
+  };
+  const handleEndDatePick = date => {
+    const start = date && pickerRange.start && pickerRange.start > endOfDay(date) ? null : pickerRange.start;
+    commitCustomRange(start, date);
+  };
   const handleClear = () => {
     setActivePresetId(null);
     onChange?.(void 0);
-    setIsOpen(false);
   };
   const formatDate = dateString => {
-    try {
-      return new Date(dateString).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric"
-      });
-    } catch {
-      return dateString;
-    }
+    const formatted = (0, import_theme.formatAbsoluteDate)(dateString, {
+      year: "always"
+    });
+    return formatted === "" ? dateString : formatted;
   };
   const getDisplayValue = () => {
     if (!value) return placeholder;
     switch (value.operator) {
       case "is":
-        return value.value ? `Is ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("Is {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isNot":
-        return value.value ? `Is not ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("Is not {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isBefore":
-        return value.value ? `Before ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("Before {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isAfter":
-        return value.value ? `After ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("After {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isOnOrBefore":
-        return value.value ? `On or before ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.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 ? (0, import_t.t)("On or after {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isBetween":
-        return value.values ? `${formatDate(value.values[0])} - ${formatDate(value.values[1])}` : placeholder;
+        return value.values ? (0, import_t.t)("{{start}} - {{end}}", {
+          start: formatDate(value.values[0]),
+          end: formatDate(value.values[1])
+        }) : placeholder;
       case "isToday":
-        return "Today";
+        return (0, import_t.t)("Today");
       case "isYesterday":
-        return "Yesterday";
+        return (0, import_t.t)("Yesterday");
       case "isTomorrow":
-        return "Tomorrow";
+        return (0, import_t.t)("Tomorrow");
       case "isThisWeek":
-        return "This week";
+        return (0, import_t.t)("This week");
       case "isLastWeek":
-        return "Last week";
+        return (0, import_t.t)("Last week");
       case "isNextWeek":
-        return "Next week";
+        return (0, import_t.t)("Next week");
       case "isThisMonth":
-        return "This month";
+        return (0, import_t.t)("This month");
       case "isLastMonth":
-        return "Last month";
+        return (0, import_t.t)("Last month");
       case "isNextMonth":
-        return "Next month";
+        return (0, import_t.t)("Next month");
       case "isThisYear":
-        return "This year";
+        return (0, import_t.t)("This year");
       case "isLastYear":
-        return "Last year";
+        return (0, import_t.t)("Last year");
       case "isNextYear":
-        return "Next year";
+        return (0, import_t.t)("Next year");
       case "isEmpty":
-        return "Is empty";
+        return (0, import_t.t)("Is empty");
       case "isNotEmpty":
-        return "Is not empty";
+        return (0, import_t.t)("Is not empty");
       default:
         return placeholder;
     }
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
-        disabled,
-        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
-          size: 16
-        }),
-        justifyContent: "flex-start",
-        minWidth: triggerMinWidth,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          flex: 1,
-          textAlign: "left",
-          color: value ? void 0 : "$color10",
-          fontSize: "$3",
-          numberOfLines: 1,
-          children: getDisplayValue()
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-          size: 16
-        })]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-      ...knobProps.borderRadius,
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      enterStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      exitStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      minWidth: popoverMinWidth,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        ...knobProps.panelPadding,
-        ...knobProps.gapLg,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          justifyContent: "space-between",
-          alignItems: "center",
+  return (
+    // LC-06: anchored editor — start-aligned to the trigger edge with
+    // collision handling (flip + clamp + resize inside the viewport).
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: "bottom-start",
+      offset: 4,
+      stayInFrame: true,
+      allowFlip: true,
+      resize: true,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          variant: "outlined",
+          disabled,
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
+            size: 16
+          }),
+          justifyContent: "flex-start",
+          minWidth: triggerMinWidth,
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$5",
-            fontWeight: "600",
-            children: "Date Filter"
-          }), value && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: "$2",
-            variant: "outlined",
-            onPress: handleClear,
-            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-              size: 16
-            }),
-            children: "Clear"
+            flex: 1,
+            textAlign: "left",
+            color: disabled ? "$color11" : value ? void 0 : "$color10",
+            fontSize: "$3",
+            numberOfLines: 1,
+            children: getDisplayValue()
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+            size: 16
           })]
-        }), showPresets && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          gap: "$2",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$4",
-            fontWeight: "500",
-            children: "Quick Filters"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-            maxHeight: 120,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-              gap: "$1",
-              children: allPresets.map(preset => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                size: knobProps.sizeToken,
-                variant: "outlined",
-                justifyContent: "flex-start",
-                onPress: () => handlePresetSelect(preset),
-                ...(activePresetId === preset.id ? {
-                  theme: "accent",
-                  backgroundColor: "$background"
-                } : void 0),
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                  fontSize: "$3",
-                  children: preset.label
-                })
-              }, preset.id))
-            })
-          })]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          ...knobProps.gap,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$4",
-            fontWeight: "500",
-            children: "Custom Date"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              flex: 1,
-              size: knobProps.sizeToken,
-              variant: "outlined",
-              onPress: () => handleCustomDateSelect((/* @__PURE__ */new Date()).toISOString(), "is"),
-              children: "Today"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              flex: 1,
-              size: knobProps.sizeToken,
-              variant: "outlined",
-              onPress: () => handleCustomDateSelect(new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString(), "is"),
-              children: "Yesterday"
-            })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$3",
-              fontWeight: "500",
-              children: "Date Range"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-              gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                flex: 1,
-                size: knobProps.sizeToken,
-                variant: "outlined",
-                onPress: () => handleDateRangeSelect(new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
-                children: "Last 7 days"
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                flex: 1,
-                size: knobProps.sizeToken,
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+        ...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",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.ScrollView, {
+          minHeight: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            ...knobProps.panelPadding,
+            ...knobProps.gapLg,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              justifyContent: "space-between",
+              alignItems: "center",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$5",
+                fontWeight: "600",
+                children: (0, import_t.t)("Date Filter")
+              }), value && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                size: "$2",
                 variant: "outlined",
-                onPress: () => handleDateRangeSelect(new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
-                children: "Last 30 days"
+                onPress: handleClear,
+                icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+                  size: 16
+                }),
+                children: (0, import_t.t)("Clear")
               })]
-            })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$3",
-              fontWeight: "500",
-              children: "Custom Range"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            }), showPresets && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
               gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                flex: 1,
-                "data-testid": "start-date-picker",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
-                  placeholder: "Start date",
-                  label: "From",
-                  minDate,
-                  maxDate
-                })
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                flex: 1,
-                "data-testid": "end-date-picker",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
-                  placeholder: "End date",
-                  label: "To",
-                  minDate,
-                  maxDate
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$4",
+                fontWeight: "500",
+                children: (0, import_t.t)("Quick Filters")
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+                maxHeight: presetListMaxHeight,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+                  gap: PRESET_ROW_GAP_TOKEN,
+                  children: allPresets.map(preset => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                    size: knobProps.sizeToken,
+                    variant: "outlined",
+                    justifyContent: "flex-start",
+                    onPress: () => handlePresetSelect(preset),
+                    ...(activePresetId === preset.id ? {
+                      theme: "accent",
+                      backgroundColor: "$background"
+                    } : void 0),
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                      fontSize: "$3",
+                      children: preset.label
+                    })
+                  }, preset.id))
                 })
               })]
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+              ...knobProps.gap,
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$4",
+                fontWeight: "500",
+                children: (0, import_t.t)("Custom Date")
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                gap: "$2",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                  flex: 1,
+                  size: knobProps.sizeToken,
+                  variant: "outlined",
+                  onPress: () => handleCustomDateSelect((/* @__PURE__ */new Date()).toISOString(), "is"),
+                  children: (0, import_t.t)("Today")
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                  flex: 1,
+                  size: knobProps.sizeToken,
+                  variant: "outlined",
+                  onPress: () => handleCustomDateSelect(new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString(), "is"),
+                  children: (0, import_t.t)("Yesterday")
+                })]
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                gap: "$2",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$3",
+                  fontWeight: "500",
+                  children: (0, import_t.t)("Date Range")
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                  gap: "$2",
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                    flex: 1,
+                    size: knobProps.sizeToken,
+                    variant: "outlined",
+                    onPress: () => handleDateRangeSelect(new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
+                    children: (0, import_t.t)("Last 7 days")
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                    flex: 1,
+                    size: knobProps.sizeToken,
+                    variant: "outlined",
+                    onPress: () => handleDateRangeSelect(new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
+                    children: (0, import_t.t)("Last 30 days")
+                  })]
+                })]
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                gap: "$2",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$3",
+                  fontWeight: "500",
+                  children: (0, import_t.t)("Custom Range")
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                  gap: "$2",
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                    flex: 1,
+                    "data-testid": "start-date-picker",
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
+                      placeholder: (0, import_t.t)("Start date"),
+                      label: (0, import_t.t)("From"),
+                      minDate,
+                      maxDate,
+                      value: pickerRange.start ?? null,
+                      onChange: handleStartDatePick
+                    })
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                    flex: 1,
+                    "data-testid": "end-date-picker",
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
+                      placeholder: (0, import_t.t)("End date"),
+                      label: (0, import_t.t)("To"),
+                      minDate,
+                      maxDate,
+                      value: pickerRange.end ?? null,
+                      onChange: handleEndDatePick
+                    })
+                  })]
+                })]
+              })]
             })]
-          })]
-        })]
-      })
-    })]
-  });
+          })
+        })
+      })]
+    })
+  );
+}
+function startOfDay(date) {
+  const day = new Date(date);
+  day.setHours(0, 0, 0, 0);
+  return day;
+}
+function endOfDay(date) {
+  const day = new Date(date);
+  day.setHours(23, 59, 59, 999);
+  return day;
+}
+function resolveDateFilterRange(filterValue, now = /* @__PURE__ */new Date()) {
+  if (!filterValue) return {
+    start: null,
+    end: null
+  };
+  const {
+    operator,
+    value,
+    values
+  } = filterValue;
+  const today = startOfDay(now);
+  const parsed = iso => {
+    if (!iso) return null;
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime()) ? null : date;
+  };
+  const dayWindow = offsetDays => {
+    const day = new Date(today);
+    day.setDate(day.getDate() + offsetDays);
+    return {
+      start: day,
+      end: endOfDay(day)
+    };
+  };
+  const weekWindow = offsetWeeks => {
+    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 => {
+    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 => {
+    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
+      };
+  }
 }
 function applyDateFilter(data, columnKey, filterValue) {
   if (!filterValue) return data;
@@ -421,13 +607,15 @@ function applyDateFilter(data, columnKey, filterValue) {
           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":
         {
@@ -435,7 +623,7 @@ function applyDateFilter(data, columnKey, filterValue) {
           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":
         {
@@ -443,7 +631,7 @@ function applyDateFilter(data, columnKey, filterValue) {
           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 itemDate.getMonth() === today.getMonth() && itemDate.getFullYear() === today.getFullYear();