From 58b47318e9c8f8b304a5d01d484473e0941eb438 Mon Sep 17 00:00:00 2001
From: Nathnael <nathnael@example.com>
Date: Thu, 13 Aug 2026 08:45:29 +0000
Subject: [PATCH] feat(freight-backoffice): consolidate Mantine from/to date
 filters into range pickers

Replaces every remaining split from/to Mantine DateInput/DatePickerInput pair
with a single DatePickerInput type="range", sharing one preset list (Today,
Last 7/30 days, this/last month, YTD) via getDateRangePresets(). Covers
ListControls (18 consumers), FleetResourcePage, ContractRequestsPage,
BookingRequestsPage (created + scheduled ranges), WagonCancellationsPage,
BatchBoardPage, ClearanceDocumentsPage, ShipmentRequestsPage.

Native Mantine range picker, not the shadcn DateRangePicker, to match each
page's existing design system instead of clashing with it.

Reports date-range filter (ReportFilters.tsx) intentionally left untouched.
---
 .../src/components/common/ListControls.tsx    | 36 +++++------
 .../src/components/common/dateRangePresets.ts | 41 +++++++++++++
 .../pages/bookings/BookingRequestsPage.tsx    | 59 +++++++------------
 .../pages/bookings/WagonCancellationsPage.tsx | 31 ++++------
 .../contracts/ClearanceDocumentsPage.tsx      | 34 ++++-------
 .../pages/contracts/ContractRequestsPage.tsx  | 34 ++++-------
 .../pages/contracts/ShipmentRequestsPage.tsx  | 31 ++++------
 .../src/pages/fleet/FleetResourcePage.tsx     | 28 ++++-----
 .../pages/trainScheduling/BatchBoardPage.tsx  | 28 ++++-----
 9 files changed, 146 insertions(+), 176 deletions(-)
 create mode 100644 apps/edr-freight-web/backoffice/src/components/common/dateRangePresets.ts

diff --git a/apps/edr-freight-web/backoffice/src/components/common/ListControls.tsx b/apps/edr-freight-web/backoffice/src/components/common/ListControls.tsx
index 92ab514ad..8ca604ba4 100644
--- a/apps/edr-freight-web/backoffice/src/components/common/ListControls.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/common/ListControls.tsx
@@ -2,6 +2,7 @@ import { Button, Group, TextInput } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
 import { Search, X } from "lucide-react";
 import type { ReactNode } from "react";
+import { getDateRangePresets } from "./dateRangePresets";
 
 export interface ListControlsProps {
   search: string;
@@ -54,28 +55,19 @@ const ListControls = ({
     )}
 
     {showDateRange && (
-      <>
-        <DatePickerInput
-          label={dateLabel ? `${dateLabel} from` : "From"}
-          placeholder="Any"
-          value={dateFrom}
-          onChange={onDateFromChange}
-          // Cannot start after it ends — the picker refuses the invalid range
-          // instead of silently returning nothing.
-          maxDate={dateTo ?? undefined}
-          clearable
-          w={150}
-        />
-        <DatePickerInput
-          label={dateLabel ? `${dateLabel} to` : "To"}
-          placeholder="Any"
-          value={dateTo}
-          onChange={onDateToChange}
-          minDate={dateFrom ?? undefined}
-          clearable
-          w={150}
-        />
-      </>
+      <DatePickerInput
+        type="range"
+        label={dateLabel ?? "Date range"}
+        placeholder="Any"
+        value={[dateFrom, dateTo]}
+        onChange={([from, to]) => {
+          onDateFromChange(from);
+          onDateToChange(to);
+        }}
+        presets={getDateRangePresets()}
+        clearable
+        w={230}
+      />
     )}
 
     {children}
diff --git a/apps/edr-freight-web/backoffice/src/components/common/dateRangePresets.ts b/apps/edr-freight-web/backoffice/src/components/common/dateRangePresets.ts
new file mode 100644
index 000000000..e59e3bb84
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/common/dateRangePresets.ts
@@ -0,0 +1,41 @@
+import {
+  format,
+  startOfDay,
+  endOfDay,
+  startOfMonth,
+  endOfMonth,
+  startOfYear,
+  subDays,
+  subMonths,
+} from "date-fns";
+import type { DatePickerPreset } from "@mantine/dates";
+
+const iso = (date: Date) => format(date, "yyyy-MM-dd");
+
+/**
+ * Shared "Today / Last 7 days / …" presets for every Mantine
+ * `<DatePickerInput type="range" presets={getDateRangePresets()} />` in the app,
+ * so every from/to filter offers the same shortcuts. Computed fresh per call
+ * (not a module-level constant) so "Today" stays today.
+ */
+export function getDateRangePresets(): DatePickerPreset<"range">[] {
+  const today = new Date();
+  return [
+    { label: "Today", value: [iso(startOfDay(today)), iso(endOfDay(today))] },
+    {
+      label: "Yesterday",
+      value: [iso(startOfDay(subDays(today, 1))), iso(endOfDay(subDays(today, 1)))],
+    },
+    { label: "Last 7 days", value: [iso(startOfDay(subDays(today, 6))), iso(endOfDay(today))] },
+    { label: "Last 30 days", value: [iso(startOfDay(subDays(today, 29))), iso(endOfDay(today))] },
+    { label: "This month", value: [iso(startOfMonth(today)), iso(endOfDay(today))] },
+    {
+      label: "Last month",
+      value: [
+        iso(startOfMonth(subMonths(today, 1))),
+        iso(endOfMonth(subMonths(today, 1))),
+      ],
+    },
+    { label: "Year to date", value: [iso(startOfYear(today)), iso(endOfDay(today))] },
+  ];
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
index 91eb52033..d55c45c3a 100644
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
@@ -13,7 +13,8 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-import { DateInput } from "@mantine/dates";
+import { DatePickerInput } from "@mantine/dates";
+import { getDateRangePresets } from "@/components/common/dateRangePresets";
 import { useDebouncedValue } from "@mantine/hooks";
 import {
   AlertTriangle,
@@ -764,53 +765,33 @@ export default function BookingRequestsPage() {
                       radius="lg"
                       style={{ minWidth: 140 }}
                     />
-                    <DateInput
-                      placeholder="Created from"
-                      value={createdFrom}
-                      onChange={(v) => {
-                        setCreatedFrom(v ? new Date(v) : null);
+                    <DatePickerInput
+                      type="range"
+                      placeholder="Created date range"
+                      value={[createdFrom, createdTo]}
+                      onChange={([from, to]) => {
+                        setCreatedFrom(from ? new Date(from) : null);
+                        setCreatedTo(to ? new Date(to) : null);
                         resetPage();
                       }}
-                      maxDate={createdTo ?? undefined}
+                      presets={getDateRangePresets()}
                       clearable
                       radius="lg"
-                      style={{ minWidth: 140 }}
+                      style={{ minWidth: 220 }}
                     />
-                    <DateInput
-                      placeholder="Created to"
-                      value={createdTo}
-                      onChange={(v) => {
-                        setCreatedTo(v ? new Date(v) : null);
+                    <DatePickerInput
+                      type="range"
+                      placeholder="Scheduled date range"
+                      value={[scheduledFrom, scheduledTo]}
+                      onChange={([from, to]) => {
+                        setScheduledFrom(from ? new Date(from) : null);
+                        setScheduledTo(to ? new Date(to) : null);
                         resetPage();
                       }}
-                      minDate={createdFrom ?? undefined}
+                      presets={getDateRangePresets()}
                       clearable
                       radius="lg"
-                      style={{ minWidth: 140 }}
-                    />
-                    <DateInput
-                      placeholder="Scheduled from"
-                      value={scheduledFrom}
-                      onChange={(v) => {
-                        setScheduledFrom(v ? new Date(v) : null);
-                        resetPage();
-                      }}
-                      maxDate={scheduledTo ?? undefined}
-                      clearable
-                      radius="lg"
-                      style={{ minWidth: 150 }}
-                    />
-                    <DateInput
-                      placeholder="Scheduled to"
-                      value={scheduledTo}
-                      onChange={(v) => {
-                        setScheduledTo(v ? new Date(v) : null);
-                        resetPage();
-                      }}
-                      minDate={scheduledFrom ?? undefined}
-                      clearable
-                      radius="lg"
-                      style={{ minWidth: 150 }}
+                      style={{ minWidth: 230 }}
                     />
                     {activeFilterCount > 0 ? (
                       <Button
diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/WagonCancellationsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/WagonCancellationsPage.tsx
index fff83d479..b1b4ef3ca 100644
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/WagonCancellationsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/WagonCancellationsPage.tsx
@@ -11,7 +11,8 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-import { DateInput } from "@mantine/dates";
+import { DatePickerInput } from "@mantine/dates";
+import { getDateRangePresets } from "@/components/common/dateRangePresets";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Search, XCircle } from "lucide-react";
@@ -304,29 +305,19 @@ export default function WagonCancellationsPage() {
                 w={190}
                 radius="md"
               />
-              <DateInput
-                placeholder="From"
-                value={from}
-                onChange={(v) => {
-                  setFrom(v ? new Date(v) : null);
+              <DatePickerInput
+                type="range"
+                placeholder="Date range"
+                value={[from, to]}
+                onChange={([newFrom, newTo]) => {
+                  setFrom(newFrom ? new Date(newFrom) : null);
+                  setTo(newTo ? new Date(newTo) : null);
                   resetPage();
                 }}
-                maxDate={to ?? undefined}
+                presets={getDateRangePresets()}
                 clearable
                 radius="md"
-                style={{ minWidth: 140 }}
-              />
-              <DateInput
-                placeholder="To"
-                value={to}
-                onChange={(v) => {
-                  setTo(v ? new Date(v) : null);
-                  resetPage();
-                }}
-                minDate={from ?? undefined}
-                clearable
-                radius="md"
-                style={{ minWidth: 140 }}
+                style={{ minWidth: 220 }}
               />
               <Button
                 variant="subtle"
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx
index ca4ed18ce..197e947a5 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx
@@ -10,7 +10,8 @@ import {
   TextInput,
   ThemeIcon,
 } from "@mantine/core";
-import { DateInput } from "@mantine/dates";
+import { DatePickerInput } from "@mantine/dates";
+import { getDateRangePresets } from "@/components/common/dateRangePresets";
 import { useDebouncedValue } from "@mantine/hooks";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { FileText, Inbox, RefreshCw, Search, User, X } from "lucide-react";
@@ -348,31 +349,20 @@ export default function ClearanceDocumentsPage() {
                   style={{ minWidth: 140 }}
                   aria-label="Filter by ownership"
                 />
-                <DateInput
-                  placeholder="Created from"
-                  value={createdFrom}
-                  onChange={(v) => {
-                    setCreatedFrom(v ? new Date(v) : null);
+                <DatePickerInput
+                  type="range"
+                  placeholder="Created date range"
+                  value={[createdFrom, createdTo]}
+                  onChange={([from, to]) => {
+                    setCreatedFrom(from ? new Date(from) : null);
+                    setCreatedTo(to ? new Date(to) : null);
                     resetPage();
                   }}
-                  maxDate={createdTo ?? undefined}
+                  presets={getDateRangePresets()}
                   clearable
                   radius="lg"
-                  style={{ minWidth: 140 }}
-                  aria-label="Created from"
-                />
-                <DateInput
-                  placeholder="Created to"
-                  value={createdTo}
-                  onChange={(v) => {
-                    setCreatedTo(v ? new Date(v) : null);
-                    resetPage();
-                  }}
-                  minDate={createdFrom ?? undefined}
-                  clearable
-                  radius="lg"
-                  style={{ minWidth: 140 }}
-                  aria-label="Created to"
+                  style={{ minWidth: 220 }}
+                  aria-label="Created date range"
                 />
               </Group>
             </Box>
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
index 3ff989bb5..dfbb26d25 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
@@ -13,7 +13,8 @@ import {
   TextInput,
   ThemeIcon,
 } from "@mantine/core";
-import { DateInput } from "@mantine/dates";
+import { DatePickerInput } from "@mantine/dates";
+import { getDateRangePresets } from "@/components/common/dateRangePresets";
 import { useDebouncedValue } from "@mantine/hooks";
 import {
   AlertTriangle,
@@ -613,31 +614,20 @@ export default function ContractRequestsPage() {
                     style={{ minWidth: 140 }}
                     aria-label="Filter by payment currency"
                   />
-                  <DateInput
-                    placeholder="Created from"
-                    value={createdFrom}
-                    onChange={(v) => {
-                      setCreatedFrom(v ? new Date(v) : null);
+                  <DatePickerInput
+                    type="range"
+                    placeholder="Created date range"
+                    value={[createdFrom, createdTo]}
+                    onChange={([from, to]) => {
+                      setCreatedFrom(from ? new Date(from) : null);
+                      setCreatedTo(to ? new Date(to) : null);
                       resetPage();
                     }}
-                    maxDate={createdTo ?? undefined}
+                    presets={getDateRangePresets()}
                     clearable
                     radius="lg"
-                    style={{ minWidth: 140 }}
-                    aria-label="Created from"
-                  />
-                  <DateInput
-                    placeholder="Created to"
-                    value={createdTo}
-                    onChange={(v) => {
-                      setCreatedTo(v ? new Date(v) : null);
-                      resetPage();
-                    }}
-                    minDate={createdFrom ?? undefined}
-                    clearable
-                    radius="lg"
-                    style={{ minWidth: 140 }}
-                    aria-label="Created to"
+                    style={{ minWidth: 220 }}
+                    aria-label="Created date range"
                   />
                   {activeFilterCount > 0 ? (
                     <Button
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
index 4eb93cafd..81b037ae6 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
@@ -17,7 +17,8 @@ import {
   Textarea,
   TextInput,
 } from "@mantine/core";
-import { DateInput } from "@mantine/dates";
+import { DatePickerInput } from "@mantine/dates";
+import { getDateRangePresets } from "@/components/common/dateRangePresets";
 import {
   ArrowUpDown,
   FilterX,
@@ -460,25 +461,19 @@ export default function ShipmentRequestsPage() {
                 allowDeselect={false}
                 aria-label="Cargo type"
               />
-              <DateInput
+              <DatePickerInput
+                type="range"
                 radius="md"
-                w={150}
-                placeholder="Preferred from"
-                value={preferredFrom}
-                onChange={(v) => setPreferredFrom(v ? new Date(v) : null)}
-                maxDate={preferredTo ?? undefined}
+                w={230}
+                placeholder="Preferred date range"
+                value={[preferredFrom, preferredTo]}
+                onChange={([from, to]) => {
+                  setPreferredFrom(from ? new Date(from) : null);
+                  setPreferredTo(to ? new Date(to) : null);
+                }}
+                presets={getDateRangePresets()}
                 clearable
-                aria-label="Preferred date from"
-              />
-              <DateInput
-                radius="md"
-                w={150}
-                placeholder="Preferred to"
-                value={preferredTo}
-                onChange={(v) => setPreferredTo(v ? new Date(v) : null)}
-                minDate={preferredFrom ?? undefined}
-                clearable
-                aria-label="Preferred date to"
+                aria-label="Preferred date range"
               />
               <Select
                 radius="md"
diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
index 06d9a20ab..d837ee712 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
@@ -1,6 +1,7 @@
 import type { ColumnDef } from "@edr/ui-common";
 import { Box, Button, Card, Container, Group, Modal, Select, Stack, Text, TextInput, Title } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
+import { getDateRangePresets } from "@/components/common/dateRangePresets";
 import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
 
 import { api } from "@/services/api";
@@ -613,26 +614,19 @@ const FleetResourcePage = () => {
               filters={
                 <Group gap="sm" wrap="wrap" align="center">
                   <DatePickerInput
-                    aria-label="Created from"
-                    placeholder="Created from"
-                    value={dateFrom}
-                    onChange={setDateFrom}
-                    maxDate={dateTo ?? undefined}
+                    type="range"
+                    aria-label="Created date range"
+                    placeholder="Created date range"
+                    value={[dateFrom, dateTo]}
+                    onChange={([from, to]) => {
+                      setDateFrom(from);
+                      setDateTo(to);
+                    }}
+                    presets={getDateRangePresets()}
                     clearable
                     size="sm"
                     radius="lg"
-                    w={160}
-                  />
-                  <DatePickerInput
-                    aria-label="Created to"
-                    placeholder="Created to"
-                    value={dateTo}
-                    onChange={setDateTo}
-                    minDate={dateFrom ?? undefined}
-                    clearable
-                    size="sm"
-                    radius="lg"
-                    w={160}
+                    w={240}
                   />
                 {listFilterSelects ? (
                   <Group gap="sm" wrap="wrap" align="center">
diff --git a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
index 6520c208e..3d77c1fc0 100644
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
@@ -19,7 +19,8 @@ import {
   ThemeIcon,
   Tooltip,
 } from "@mantine/core";
-import { DateInput } from "@mantine/dates";
+import { DatePickerInput } from "@mantine/dates";
+import { getDateRangePresets } from "@/components/common/dateRangePresets";
 import { useDebouncedValue } from "@mantine/hooks";
 import {
   AlertTriangle,
@@ -792,24 +793,19 @@ export default function BatchBoardPage() {
                     w={140}
                     styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
                   />
-                  <DateInput
+                  <DatePickerInput
+                    type="range"
                     size="sm"
                     radius="lg"
-                    placeholder="Departs from"
-                    value={departureFrom}
-                    onChange={(v) => setDepartureFrom(v ? new Date(v) : null)}
+                    placeholder="Departure date range"
+                    value={[departureFrom, departureTo]}
+                    onChange={([from, to]) => {
+                      setDepartureFrom(from ? new Date(from) : null);
+                      setDepartureTo(to ? new Date(to) : null);
+                    }}
+                    presets={getDateRangePresets()}
                     clearable
-                    w={140}
-                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
-                  />
-                  <DateInput
-                    size="sm"
-                    radius="lg"
-                    placeholder="Departs to"
-                    value={departureTo}
-                    onChange={(v) => setDepartureTo(v ? new Date(v) : null)}
-                    clearable
-                    w={140}
+                    w={230}
                     styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
                   />
                   <Select