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 && (
- <>
-
-
- >
+ {
+ 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
+ * `` 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 }}
/>
- {
- setCreatedFrom(v ? new Date(v) : null);
+ {
+ 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 }}
/>
- {
- setCreatedTo(v ? new Date(v) : null);
+ {
+ setScheduledFrom(from ? new Date(from) : null);
+ setScheduledTo(to ? new Date(to) : null);
resetPage();
}}
- minDate={createdFrom ?? undefined}
+ presets={getDateRangePresets()}
clearable
radius="lg"
- style={{ minWidth: 140 }}
- />
- {
- setScheduledFrom(v ? new Date(v) : null);
- resetPage();
- }}
- maxDate={scheduledTo ?? undefined}
- clearable
- radius="lg"
- style={{ minWidth: 150 }}
- />
- {
- setScheduledTo(v ? new Date(v) : null);
- resetPage();
- }}
- minDate={scheduledFrom ?? undefined}
- clearable
- radius="lg"
- style={{ minWidth: 150 }}
+ style={{ minWidth: 230 }}
/>
{activeFilterCount > 0 ? (
- {
- setFrom(v ? new Date(v) : null);
+ {
+ setFrom(newFrom ? new Date(newFrom) : null);
+ setTo(newTo ? new Date(newTo) : null);
resetPage();
}}
- maxDate={to ?? undefined}
+ presets={getDateRangePresets()}
clearable
radius="md"
- style={{ minWidth: 140 }}
- />
- {
- setTo(v ? new Date(v) : null);
- resetPage();
- }}
- minDate={from ?? undefined}
- clearable
- radius="md"
- style={{ minWidth: 140 }}
+ style={{ minWidth: 220 }}
/>
- {
- setCreatedFrom(v ? new Date(v) : null);
+ {
+ 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"
- />
- {
- 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"
/>
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"
/>
- {
- setCreatedFrom(v ? new Date(v) : null);
+ {
+ 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"
- />
- {
- 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 ? (
- 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"
- />
- setPreferredTo(v ? new Date(v) : null)}
- minDate={preferredFrom ?? undefined}
- clearable
- aria-label="Preferred date to"
+ aria-label="Preferred date range"
/>