Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-26 18:42:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(freight-backoffice): consolidate Mantine from/to date filters into range pickers

Browse Source 
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.
This commit is contained in:
Nathnael
2026-08-13 08:45:29 +00:00
parent efc5a24380
commit 58b47318e9
9 changed files with 146 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/edr-freight-web/backoffice/src/components/common/ListControls.tsx
View File

@@ -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}

41
apps/edr-freight-web/backoffice/src/components/common/dateRangePresets.ts Normal file
View File

@@ -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))] },
];
}

59
apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
View File

@@ -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

31
apps/edr-freight-web/backoffice/src/pages/bookings/WagonCancellationsPage.tsx
View File

@@ -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"

34
apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx
View File

@@ -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>

34
apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
View File

@@ -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

31
apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
View File

@@ -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"

28
apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
View File

@@ -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">

28
apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
View File

@@ -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